js原生实现ajax

Posted 2020-08-19

今天来总结一下javascript原生实现ajax数据请求。

一：什么是AJAX；

二：AJAX有什么优势；

二：AJAX的工作原理；

三：AJAX的用途；

一：什么是 AJAX ？

   AJAX = 异步 JavaScript 和 XML。

   AJAX 是一种用于创建快速动态网页的技术。

   通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

   传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

   关键词：动态加载，页面无刷新

二：AJAX应用有什么优势？

   1.减少冗余请求和响应对服务造成的负担.

    2.无刷新更新页面,带来更好的用户体验.

    3.减轻服务器速写的负担，节约空间和宽带租用成本。

    4.采用异步提交,读写速度更快.

  缺点：

1. 
   

   1. AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性

   2. AJAX只是局部刷新,所以页面的后退按钮是没有用的.

   3. 对流媒体还有移动设备的支持不是太好等.

三：AJAX的工作原理

  1.创建XHR对象

        var xh=new XMLHttpRequest();

   在创建xhr对象的时候，会有兼容性问题；

   兼容写法：

if (window.ActiveXObject) {  //IE浏览器获取xhr对象写法
        xhr = new ActiveXObject("Microsoft.XMLHTTP");  
    }  
    else if (window.XMLHttpRequest) {  //其他浏览器获取xhr对象写法
        xhr = new XMLHttpRequest();  
    }

  2.XHR请求

xhr.open(method,url,async);//发送xhr请求
xhr.send(string);//发送请求内容

open方法：

属性	描述
open(method,url,async);	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string);	将请求发送到服务器。 string：仅用于 POST 请求

在发送xhr请求的时候，分为GET和POST两种请求发式：

GET请求发式：（百度糯米的搜索就是使用ajax获取）

xhr.open("GET", url, true);
xhr.open("POST", url, true);

get请求发式和post请求发式的区别。

url：后端提供的数据请求地址。

async：是否异步请求。

send方法：

此方法是在post方法请求的时候使用的；如果是get请求发式，此方法传值为null。

传值形式为键值对的形式。

注意：在post传值前，需要一个请求头，如下：

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

3.onreadystatechange 事件

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState（状态值）	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status（状态码）	200: "OK" 404: 未找到页面 500：后台的问题

AJAX状态值与状态码区别
AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“xhr.readyState”获得。（由数字1~4单位数字组成）

AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“xhr.status”所获得；

AJAX运行步骤与状态值说明
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并不是一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了

对于上面的状态，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。

ajax请求代码：

var Ajax={ 
   get: function (url,fn){ 
        var xhr=new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        xhr.open(‘GET‘,url,true); 
        xhr.onreadystatechange=function(){
                if (xhr.readyState==4&&xhr.status==200||xhr.status==304){//readyState==4说明请求已完成
                    fn.call(this, xhr.responseText);  //从服务器获得数据
                  }          
             };         
        xhr.send(null);
    },     
    post: function (url,data,fn){
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.onreadystatechange=function(){
              if (xhr.readyState==4&&(xhr.status==200||xhr.status==304)){//304未修改
                  fn.call(this, obj.responseText);             
                 }         
          };
          xhr.send(data);
        }
}

本文出自 “简单做人，认真做事” 博客，请务必保留此出处http://jaychao.blog.51cto.com/7636789/1871064