Ajax 原生ajax详解

最新推荐文章于 2022-08-15 18:17:21 发布

原创最新推荐文章于 2022-08-15 18:17:21 发布 · 535 阅读

2 ·

CC 4.0 BY-SA版权

面试所需同时被 2 个专栏收录

9 篇文章

订阅专栏

Ajax

6 篇文章

订阅专栏

1、特点：局部刷新，用户体验度高

2、步骤：（1）创建xmlHttpRequest()对象；

（2）准备发送；

（3）执行发送动作；

（4）指定回调函数；

3、get请求方式：

    （1）无参请求方式
    （2）有参请求方式
         描述：get请求拼接地址栏信息 url=xxx.php?name=12&password=122;
             var url=''
         xhr.open('get',url,true)
             xhr.send();

（3）代码：

            //1.创建 XMLHttprequest()对象 
                var xhr=new XMLHttpRequest();//ie6 5  不支持
            //2.准备发送请求
            //语法：xhr.open('请求的方式get/post','地址',true)  true异步请求数据  false同步
                xhr.open('get','arr.json',true);
            //3.发送请求
                xhr.send();//post请求 带参数    
            //4.成功回调函数
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){                   
                       console.log(JSON.parse(xhr.responseText));
                    }
                }

4、post请求方式：

（1）描述：post请求和get请求的差异就在于多了一个表单数据，在xhr对象中可以通过FormData进行构建；
（2）语法：var formData = new FormData();
                     formData.append('key',value);//value如果是字符串类型要加引号。
               xhr.send(formData);
（3）说明：
                至于formData的创建时机和位置，只要你能够在请求发送出去之前，
                也就是xhr.send()语句被写出之前添加给xhr对象，
                那么你愿意把formData放在哪就放在哪。

（4）代码：

       //1.创建对象
   var xhr=new XMLHttpRequest();
       //2、post请求方式
   xhr.open('post','post.php',true);
       //post传递数据   利用 formdata
   var form=new FormData();//对象 存数据  form.append(key,value)  key第一个参数 后台接收的变量 第二个参数 我们传递值
   form.append('uname',name);
   form.append('upsd',psd);
       //3.发送
   xhr.send(form);                
       //4.回调函数
   xhr.onreadystatechange=function(){
          if(xhr.readyState==4 && xhr.status==200){
            console.log(xhr.responseText);
          }
    }

5、onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务；每当readyState改变时，就会触发onreadystatechange事件。

readyState属性存有XMLHttpRequest的状态信息。onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

（1） xhr.readyState 状态改变
        0: 创建对象 xhr XMLHttpRquest()
        1: 连接服务器 open ()
        2: 服务器接收到你的请求
        3: 服务器处理数据
        4: 响应数据返回给我们内容
            404: 未找到页面

（2）http协议的状态码
xhr.status==200 ok 成功
404 请求资源不存在

           2xx 请求成功
           4xx 资源不存在
       5xx 服务器错误后台代码
           3xx 302 303 307 重定向