原生ajax异步请求基础知识

Posted Cristina_Guan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生ajax异步请求基础知识相关的知识,希望对你有一定的参考价值。

一、同步交互与异步交互的概念:

     * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求).

     * 异步交互:客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做其他任何事情(不等);

     同步与异步的区别:

     * 同步交互

       1、执行速度相对比较慢

       2、响应的是完整的html页面

     * 异步交互

       1、 执行速度相对比较快

       2、 响应的是部分数据

 

二、AJAX的概念:(Asynchronous javascript and Xml)--直译中文 - javascript和XML的异步

      (简单理解-->就是客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax)

     * Ajax实现的是B/S架构下的异步交互

     * 实现异步交互的技术-- <iframe src="">元素

     * Ajax具有核心对象-- XMLHttpRequest对象

三、实现Ajax的步骤

   * 创建XMLHttpRequest对象

   * 注册监听

   * 建立连接

   * 发送请求

   实现Ajax的六步是什么?(不标准)

   * 创建XMLHttpRequest对象

   * 建立连接

   * 发送请求

   * 注册监听 - onreadystatechange事件

   * 获取服务器端的通信状态 - readyState

   * 获取服务器端的状态码

 

 1、创建XMLHttpRequest对象的语法:

   function getXhr()

{

      // 声明XMLHttpRequest对象

     var xhr = null;

      // 根据浏览器的不同情况进行创建

      if(window.XMLHttpRequest)

        {// 表示除IE外的其他浏览器

              xhr = new XMLHttpRequest();

         }else{ // 表示IE浏览器下创建

             xhr = new ActiveXObject(\'Microsoft.XMLHttp\');

          }

        return xhr;

   }

   // 调用getXhr()

   var xhr = getXhr();

 

2、建立连接:

  * 使用XMLHttpRequest对象的open(method,url)方法

       * 作用 - 与服务器端建立连接

       *参数含义:

            * method - 设置当前请求的类型get/post

            * url - 设置当前请求的地址

3、向服务器端发送请求:

    *使用XMLHttpRequest对象的send(请求参数)方法:

       * 请求参数的格式 - key=value

注意:* GET与POST的区别

        * GET请求类型

             * send()方法不起作用,但是不能被省略;语法:xhr.send(null);

             * 请求参数 -在url后面写?key=value

       * POST请求类型

            * send()方法起作用,在send()方法被调用前,使用setRequestHeader()方法设置请求头信息

               xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4、注册监听:

    * onreadystatechange事件

       * 作用 - 监听服务器端的通信状态改变

      xhr.onreadystatechange=function()

      {

       }

5、获取服务器端的通信状态:

    *使用核心对象属性readyState、status

     * readyState - 表示当前服务器端的通信状态

        * 0 - (服务器端)尚未初始化

        * 1 - (服务器端)正在接收

        * 2 - (服务器端)接收完毕

        * 3 - (服务器端)正在响应

        * 4 - (服务器端)响应完毕

     * status --表示当前服务器端的状态码

        * 200 - 请求成功

       * 404 - 网页找不到(请求路径不正确)

       * 500 - 服务器端错误

     if(xhr.readyState==4&&xhr.status==200)

     {

      }

6、获取响应数据:

     使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据;

     var data=xhr.responseText;

 

4~6步就是接收服务器端响应数据的步骤:

     * 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态

     * 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(4--响应完毕)

     * 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200--表示请求成功)

     * 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据

 

demo:(这里省份也可以放在服务器端,通过 window.onload=function(){}在页面加载完后请求服务器关于省份的信息,方法步骤按照上面的4大步写就行)

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>ajax02_二级联动</title>
 6 </head>
 7 <body>
 8     <form>
 9         <select id="province">
10             <option>请选择</option>
11         </select>
12         <select  id="city">
13             <option>请选择</option>
14         </select>
15     </form>
16     <script>
17          var  se_province=document.getElementById("province");
18          var  Pro_city=document.getElementById("city");
19             //加载页面后显示省份列表内容
20          window.onload=function(){
21             var option=province.getElementsByTagName("option");
22             var arrayProvice=["北京市","广东省","四川省","湖南省","云南省"];
23             for(var i=0 ;i<arrayProvice.length;i++)
24             {   //新建option标签
25                 var option=document.createElement("option");
26                 //把数组内容放入option里面
27                 var textNode=document.createTextNode(arrayProvice[i]);
28                 option.appendChild(textNode);
29                 //给select标签添加option
30                 se_province.appendChild(option);
31             }
32         }
33     
34         se_province.onchange=function(){
35              //先为city元素的option文本内容情况,防止在多次触发onchange事件时出现城市列表重复添加
36                var opts=Pro_city.getElementsByTagName("option");
37                //console.log(opts);
38                for(var j=opts.length-1;j>0;j--)
39                {
40                    Pro_city.removeChild(opts[j]);
41                }
42             //alert(se_province.value);
43             
44             //判断:如果省份value值是请选择就不会向服务器发送请求,避免生成多余的option标签
45             if(se_province.value !="请选择"){
46             //执行ajax异步请求
47             var xhr=getXhr();
48             xhr.open("post","ajax02.php",true);
49             xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
50             xhr.send("provcince="+se_province.value);
51             xhr.onreadystatechange=function(){
52                 if(xhr.readyState==4&&xhr.status==200)
53                     //接收服务器端的数据内容
54                    var data=xhr.responseText;//这里data是字符串
55                    var citydata=data.split(",");//截断字符串变成数组
56                     //console.log(data);
57                   
58                    for(var i=0;i<citydata.length;i++){
59                    //新建option标签
60                    var option=document.createElement("option");
61                    //把数组内容放入option里面
62                    var textNode=document.createTextNode(citydata[i]);
63                    option.appendChild(textNode);
64                   //给select标签添加option
65                    Pro_city.appendChild(option);
66                    
67                    }
68             }
69           }
70             
71         }
72          
73         //创建XMLHTTPRequest对象, XMLHttpRequest 用于在后台与服务器交换数据
74       function getXhr(){
75           var xmlhttp;
76           if(window.XMLHttpRequest){
77               xmlhttp=new XMLHttpRequest();
78           }else{
79               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
80           }
81           return xmlhttp;
82       } 
83 </script>
84 </body>
85 </html>

ajax02.php文件代码:

<?php 
  //接收客户端发送的省份信息
  $province=$_POST["provcince"];
     
     switch($province){
        case "北京市":echo "朝阳区,海淀区,通州区,怀柔区";
        break;
        case "广东省":echo "深圳市,东莞市,广州市,佛山市";
        break;
        case "湖南省":echo "长沙市,湘潭市,邵阳市,岳阳市";
        break;
        case "四川省":echo "成都市,南充市,绵阳市,广元市";
        break;
        case "云南省":echo "昆明市,曲靖市,玉溪市,楚雄市";   
        break;
             }
?>

 

 

 <PS:转载请注明出处!>

 

以上是关于原生ajax异步请求基础知识的主要内容,如果未能解决你的问题,请参考以下文章

原生AJAX请求实例教程

原生AJAX请求教程

原生javaScript中使用Ajax实现异步通信

使用原生JavaScript发送ajax请求

Ajax_原生ajax写法理解异步请求js单线程+事件队列封装原生ajax

原生ajax类