欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

如何使用原生js来实现Ajax

程序员文章站 2022-03-20 17:04:50
...
这篇文章主要介绍了关于如何使用原生js来实现Ajax,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
  1. 创建Ajax对象

  2. 连接服务器

  3. 发送请求

       - `send()`接受一个参数(作为请求主体发送的数据),如果没有数据则必须传入`null`,因为这个参数对有些浏览器来说是必须的。调用`send()`之后,请求就会被分配到服务器
  4. 接收返回

      - 客户端和服务器端有交互的时候会调用`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中文网!

相关推荐:

对angular的组件通信的解析

以上就是如何使用原生js来实现Ajax的详细内容,更多请关注其它相关文章!

相关标签: javascript ajax