Ajax原生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良步写就推行)

Ajax 1

 

 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:转载请注明出处!>

 

相关文章