這篇文章主要介紹了關於如何使用原生js來實現Ajax，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
創建Ajax物件
連接伺服器
發送請求
- `send()`接受一个参数（作为请求主体发送的数据），如果没有数据则必须传入`null`,因为这个参数对有些浏览器来说是必须的。调用`send()`之后，请求就会被分配到服务器
接收回傳
- 客户端和服务器端有交互的时候会调用`onreadystatechange` - oAjax.`readyState` **表示请求/响应过程的当前活动阶段**。 - 0->（未初始化）：还没有调用 `open()` 方法。 - 1->（载入）：已调用 `send()` 方法，正在发送请求。 - 2->载入完成）：`send()` 方法完成，已收到全部响应内容。 - 3->（解析）：正在解析响应内容。 - 4->（完成）：响应内容解析完成，可以在客户端调用。 - `responseText`:作为响应主体被返回的文本； - `responseXML`:若响应的内容类型是`"text/xml"`或`"application/xml"`,该属性中将保存着包含着响应数据的`XML DOM`文档 - `status`:响应的`HTTP`状态； - `statusText`:`HTTP`状态的说明；
/**
* 原生js实现Ajax
* @param url
* @param fnSucc
*/
function ajax(url, fnSucc){
if(window.XMLHttpRequest){
var XHR = new XMLHTTPRequest();
}else{
var XHR = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
}
// readystate值每次改变，都会触发readystatechange事件
// 通常我们只对readstate值为4的阶段感兴趣
// 不过，必须在调用open()之前指定onreadystatechange事件处理程序，才能确保跨浏览器兼容性。
XHR.onreadystatechange = function(){
if(XHR.readyState == 4){
if(XHR.status >= 200 && XHR.status <= 300 || XHR.status == 304){
fnSucc(XHR.responseText);//成功的时候调用这个方法
}else{
if(fnFiled){
fnFiled(XHR.status);
}
}
}
}
XHR.open("GET", url, true);//把要读取的参数的传过来, true：异步，false:同步
XHR.send(null);// send接受一个参数（作为请求主体发送的数据），如果没有数据则必须传入null,因为这个参数对有些浏览器来说是必须的。调用send()之后，请求就会被分配到服务器
}/**
* 支持更早期IE版本 IE5+
* @returns {XMLHttpRequest}
*/
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
i, len = versions.length;
for(i = 0; i < len; i++){
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
berak;
}
}
} else {
throw new Error("No XHR object available.")
}
}window.onload = function(){
var btn = document.getElementById("btn1");
btn.onclick = function(){
ajax('a.txt', function fnSucc(str){
alert(str)
});
}
}以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
#以上是如何使用原生js來實作Ajax的詳細內容。更多資訊請關注PHP中文網其他相關文章！
