ajax实现原理解析

实现原理：

①ajax对象的构造函数

(function(){
         varBtn=document.getElementById("btn");
         Btn.οnclick=function(){
       var xhr=new XMLHttpRequest();//IE7及以上兼容 1.创建一个ajax对象-----相当于打开浏览器
       xhr.open("get","1.txt",true);//----相当于在地址栏中输入地址
       xhr.send();//-----相当于提交，回车键
       xhr.onreadystatechange=function(){//----相当于等待服务器返回内容
             if(xhr.readyState==4){
                 alert(xhr.responseText);
             }
       }
         };
})();

IE6及以下不支持XMLHttpRequest

IE6及以下创建ajax对象：

通过ActiveXObject插件外接过来，不是IE内核提供的

ActiveXObject里面有很多插件，我们只需要Ajax对应的插件，因此需要输入名称

new ActiveXObject(“Microsoft.XMLHTTP”) Microsoft.XMLHTTP-----ajax插件

(function(){
       varBtn=document.getElementById("btn");
       Btn.οnclick=function(){
       //兼容处理方式1：
          var xhr=null;
          if(typeof XMLHttpRequest != "undefined"){ //用if(XMLHttpRequest)IE6及以下会报错，也可用if(window.XMLHttpRequest)
          xhr=new XMLHttpRequest();
       }else{
          xhr=newActiveXObject("Microsoft.XMLHTTP");
        }  
      //兼容处理方式2：try…catch语句：try中发生错误会执行catch
       try{
            xhr=new XMLHttpRequest();
       }catch(e){
            xhr=newActiveXObject("Microsoft.XMLHTTP");
       }
       xhr.open("get","1.txt",true);//在地址栏中输入地址
       xhr.send();//提交，回车键
       xhr.onreadystatechange=function(){//等待服务器返回内容
          if(xhr.readyState==4){
                alert(xhr.responseText);
          }
       }
     };
})();

②open(),准备，设置3个参数：

1.      打开方式：

get或post方式，选择哪种方式，根据两种方式的特点和具体需求决定，很像表单的method属性;

2.      地址：

类似于表单的action属性；

3.      是否异步，true表示异步，false表示同步；

异步：非阻塞模式：前面的代码不会影响后面代码的执行，ajax工作的同时，不会影响其它代码的执行。

同步：阻塞模式：前面的代码会影响后面代码的执行

阻塞模式：前面的代码没执行外，后面的代码需要排队等待，发生阻塞，如：

<script src=”jquery.js”></script>
<script>
    $(function(){ }) //-----如果jquery.js没有加载完，会影响该语句的执行，该语句发生阻塞。
</script>

非阻塞模式：前面代码的滞留，不会影响后续代码继续执行，如：

setTimeout ( function() {
    alert (1);
}, 2000);

alert (2);

会先输出2, 然后每隔2秒输出一次1。

    异步模式：常用模式

xhr.open("get","1.txt",true);
xhr.send();
alert(xhr.responseText);//----输出为空，因为采用的是异步非阻塞模式，该语句会立即执行，而像服务器发送请求到响应需要时间，所以会输出空。

  同步模式：    

 xhr.open("get","1.txt",false);
 xhr.send();
  //中间有同步需求代码
 alert(xhr.responseText);//---- 会输出1.txt文件里的内容，因为采用的是同步阻塞模式，代码会一句一句的排队执行，因此该语句是服务器响应以后执行的，所有输出非空。

 行为与表单很像：<form></form>

表单：用于数据提交

 表单元素有自己的属性：action: 数据提交的地址，默认的是当前页面

                       method: 数据提交的方式，默认是get方式

1.      get

2.      post

                       enctype: 提交数据的格式

                              默认值 enctype=”application/x-www-form-urlencoded”

Get方式：

<form action="1.get.php">
     <input type="text" name="username" />
     <input type="text" name="age" />
     <input type="submit" value="提交" />
</form>

网页效果：网页地址：http://localhost/Ajax/form.html

点击提交按钮，地址变为：http://localhost/Ajax/1.get.php?username=ren&age=25

即：用get方式提交表单：会把数据名称和数据值用“=”连接，如果有多个数据对，就用“&”连接，然后把数据放在“url?”的后面传到指定页面。username=ren&age=25

1.get.php：

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
// 后端获取表单数据的方式
$username =$_GET["username"];
$age = $_GET["age"];
echo"你的名字是：{$username},年龄：{$age}";

由此可看出：

以get方式提交表单，用户信息放在url上，可以显示出来，不能保护用户隐私(url会缓存到浏览器的历史记录中)。也可以通过url直接修改数据信息，不安全！

    由于url长度限制(IE上限制为2000多个字符，超过限制，会把数据截断，最大为2K，2048个字符)的原因，我们不要通过get方式传递过多的数据，截断，获得的数据不完整。

    传递的数据类型：只能传递字符。

Post方式：

<pre name="code" class="html"><form action="1.post.php"method="post">
      <input type="text" name="username" />
      <input type="text" name="age" />
      <input type="submit" value="提交" />
</form>

1.post.php:

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
// 后端获取表单数据的方式
$username =$_POST["username"];
$age = $_POST["age"];
echo"你的名字是：{$username},年龄：{$age}";

用户信息不会出现在url上。

用户提交的数据是通过请求头传过来的，而且数据的传递格式是完全一样的，都是：username=ren&age=25！（就像使用不同的快递公司传递相同的包裹一样）

    Post方式理论上无限制（PHP，上默认限制post传递最大为8M(服务器不同，限制可能不同)，当然可以修改，如改为800M等，所以理论上无限制）

    传递的数据类型：多种，如二进制数据或文本。后端处理时需要细致考虑。

③send()发送请求

④数据的获取

//等待服务器返回内容
xhr.onreadystatechange = function(){
      if (xhr.readyState == 4){
          alert (xhr.responseText);
      }
 }

readystatechange事件：在readyState属性的值改变的时候触发。

readyState属性：Ajax工作状态，有5个值

          --0：初始化，还未调用open方法

          --1：载入，已调用send方法，正在发生请求

          --2：载入完成，send方法完成，以收到全部响应内容(机器看的懂，人看不懂)

          --3：解析，正在解析响应内容

          --4：完成，响应内容解析完成，可以在客户端调用了

responseText属性：Ajax请求返回的内容存放到这个属性中，返回的是字符串类型。

⑤容错处理：地址写错等。

status属性：服务器状态，HTTP状态码。

HTTP状态码（HTTPStatus Code）是用以表示网页服务器HTTP响应状态的3位数字代码。

 

 xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
      if(xhr.status == 200){
          alert (xhr.responseText);
      } else {
          alert(“出错了，Err: ” + xhr.status);
      }
   }
}