原生JS实现Ajax

// 第一步: 获得XMLHttpRequest对象
            var ajax = new XMLHttpRequest();
            // 第二步: 设置状态监听函数
            ajax.onreadystatechange = function(){
                console.log(ajax.readyState);
                console.log(ajax.status);
                // 第五步:在监听函数中,判断readyState=4 && status=200表示请求成功
                if(ajax.readyState==4 && ajax.status==200){
                    // 第六步: 使用responseText、responseXML接受响应数据,并使用原生JS操作DOM进行显示
                    console.log(ajax.responseText);
                    console.log(ajax.responseXML);// 返回不是XML,显示null
                    console.log(JSON.parse(ajax.responseText));
                    console.log(eval("("+ajax.responseText+")"));
                }
            }
            // 第三步: open一个链接
            ajax.open("GET","h51701.json",false);//true异步请求,false同步
            
            // 第四步: send一个请求。 可以发送对象和字符串,不需要传递数据发送null
            ajax.send(null);
注释:

1. open(method, url, async) 方法需要三个参数:

  method:发送请求所使用的方法(GET或POST);与POST相比,GET更简单也更快,并且在大部分情况下都能用;然而,在以下情况中,请使用POST请求:

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
 url:规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务));

 async:规定应当对请求进行异步(true)或同步(false)处理;true是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理;false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange:存有处理服务器响应的函数,每当 readyState 改变时,onreadystatechange 函数就会被执行。

4. readyState:存有服务器响应的状态信息。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
5. responseText:获得字符串形式的响应数据。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Ajax的原理: 简单来说就是 通过XmlHttpRequest对象向服务器发异步请求,从服务器获得数据,然后用 ...
    郭先生_515阅读 64,214评论 5 26
  • 说明:1.open(method, url, async)方法需要三个参数:method:发送请求所使用的方法(G...
    萌咖Monkey阅读 91评论 0 1
  • 1. 简单实现 2. 基于promise实现
    MY代码世间阅读 207评论 0 1
  • 原生Js的实现 事件 鼠标事件 *e.stoppropagation();//阻止事件冒泡 键盘事件 事件对象(e...
    Chihiro_yy阅读 3,249评论 4 1
  • 原生js实现Ajax方法:var Ajax={get: function(url, fn) { var xhr =...
    lueyoo阅读 524评论 0 0

友情链接更多精彩内容