原生的AJAX写法,可以直接复制过来套用

时间:2021-12-04 03:15:00

方法一:

function createXMLHTTPRequest() {
//1.创建XMLHttpRequest对象
//这是XMLHttpReuquest对象无部使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
var xmlHttpRequest;
if (window.XMLHttpRequest) {
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlHttpRequest = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlHttpRequest.overrideMimeType) {
xmlHttpRequest.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6,IE5.5,IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i = ; i < activexName.length; i++) {
try {
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
if (xmlHttpRequest) {
break;
}
} catch (e) {
}
}
}
return xmlHttpRequest;
} //post方法
function post() {
//创建AJAX原生环境后用变量接收
var req = createXMLHTTPRequest();
if (req) {
//传参方式,url,是否异步(asyn)
req.open("POST", "webAjax.ashx", true);
//post必须设置这个类型
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//必须带这个传参,就算你要调用的方法不带参数,不管是get还是post有参传参,没参传空
req.send("");
//回调函数,当 readyState 等于 4 且状态为 200 时,表示响应已就绪,可以做数据操作了
req.onreadystatechange = function () {
if (req.readyState == ) {
if (req.status == ) {
//req.responseText可以返回后台的返回内容
alert("success");
} else {
alert("error");
}
} }
}
} //get方法
function get() {
var req = createXMLHTTPRequest();
if (req) {
req.open("GET", "AJAXTest.aspx", true);
req.onreadystatechange = function () {
if (req.readyState == ) {
if (req.status == ) {
alert(req.responseText);
} else {
alert("error");
}
}
}
req.send(null);
}
}

方法二:

 //以get方法为例
var xmlhttp;
function loadXMLDoc(url, cfunc) {
//创建环境
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//创建回调函数
xmlhttp.onreadystatechange = cfunc;
//get方式发送数据
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myFunction() {
//调用上述的AJAX方法,传入url和回调函数的实现方法(响应就绪时会执行)
loadXMLDoc("/ajax/test1.txt", function () {
if (xmlhttp.readyState == && xmlhttp.status == ) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
});
}