原生ajax

一. Ajax 是什么？

• 全称Asynchronous JavaScript and XML；
• 异步的 JavaScript 和 XML；
• 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容；
• 能够实现局部刷新，大大降低了资源的浪费；
• 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行；
• 是一门用于创建快速动态网页的技术；
• 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页；

二. Ajax工作原理

三. Ajax的使用

Ajax的使用分为四部分：

1. 创建一个XMLHttpRequest对象；
   1.1 兼容IE低版本浏览器（ie5-ie6）；
   1.2 使用if，else或者try，catch；
2. 配置请求信息；
   2.1 请求的方式；
   2.2 请求文件的路径；
   2.3 是否异步，默认为true；
3. 发送请求；
   3.1 get与post的区别；
   3.2 get与post的使用场景；
4. 监听状态变化，执行相应回调函数；
   4.1 http状态码都有哪些？
   4.2 不同状态码代表的含义？

3.1 创建XMLHttpRequest对象

目前所有的现代浏览器（包括IE7+、Firefox、Chrome、Safari 以及 Opera）均内建有 XMLHttpRequest 对象，写法如下：

var xhr = new XMLHttpRequest();

低版本的 IE 浏览器 （主要指 IE5 和 IE6）没有XMLHttpRequest 对象，使用 ActiveXObject 对象，写法如下：

var xhr =new ActiveXObject("Microsoft.XMLHTTP");

举个兼容性写法的例子：

为了兼容所有的现代浏览器，包括 IE5 和 IE6，需要判断浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xhr;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr = new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

3.2 向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法：

方法	参数配置
open(method, url, async)	method：请求的类型, GET 或 POST;url：文件在服务器上的位置;async：布尔值，判断是否异步，true为异步（默认）或 false为同步;
send(string)	string：参数，get不传参，仅用于 POST 请求

注意：

• 不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

• 请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

• 当你使用 async=false 时，后面不要写 onreadystatechange 函数 - 直接把代码放到 send() 语句后面即可：

  xhr.open("GET","/try/ajax/ajax_demo.txt",false);
  xhr.send();
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  
  

举个栗子：

// 使用get方法请求服务器上的1.txt文件
xhr.open("GET","1.txt",true);
xhr.send();

3.2.2 GET与POST的区别

• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用；
• GET存在缓存问题，使用GET方法一定要记得清除缓存，不然请求的数据不是最新的；
• GET不安全，明文传输，POST更安全；
• GET适用于小文件，POST没有数量限制；
• GET使用send方法时不传参，POST必须传参；

3.2.3 只能使用 POST 请求的情况：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.2.4 怎么使用POST发送数据？

它其实就类似于 HTML 表单那样 POST 数据，我们需要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中写要发送的数据：
向请求添加 HTTP 头方法如下：

xhr.setRequestHeader(header,value);
// header: 规定头的名称;
// value: 规定头的值;

xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Zhou&lname=minghang");

3.4 监听事件变化

• 如果是同步请求的话，不需要写监听事件变化函数；
• 一般默认都是异步请求，才写监听函数；

异步请求时的监听事件变化函数如下：

    xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200){
        document.getElementById("myDiv").innerHTML = xhr.responseText;
    }else{
         console.log('失败了');
    }
}

3.4.2 onreadystatechange 事件

• 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
• 每当 readyState 改变时，就会触发 onreadystatechange 事件。
• readyState 属性存有 XMLHttpRequest 的状态信息。

3.4.2.1 onreadystatechange属性的作用？

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

3.4.2.2 readyState属性的作用？都有哪些状态？

• 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

一般常见的状态码有：

• 200：“OK, 成功”
• 404: “页面找不到”

状态码具体含义：

• 200：服务器响应正常。
• 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
• 400：无法找到请求的资源。
• 401：访问资源的权限不够。
• 403：没有权限访问资源。
• 404：需要访问的资源不存在。
• 405：需要访问的资源被禁止。
• 407：访问的资源需要代理身份验证。
• 414：请求的URL太长。
• 500：服务器内部错误。

四. 怎么处理服务器反馈的数据？

如果我们想获得服务器上的数据，并进行相应的操作，这就要用到XMLHttpRequest 对象的 responseText 或 responseXML 属性。

• responseText属性：

  • 获得字符串形式的响应数据;
  • 如果来自服务器的响应并非 XML，请使用 responseText 属性；
  • responseText 属性返回**字符串** 形式的响应；

  document.getElementById("myDiv").innerHTML=xhr.responseText;
  
  

• responseXML属性：

  • 获得 XML 形式的响应数据。
  • 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

   xmlDoc=xmlhttp.responseXML;
   txt="";
   x=xmlDoc.getElementsByTagName("ARTIST");
   for (i=0;i<x.length;i++)
   {
       txt=txt + x[i].childNodes[0].nodeValue + "<br>";
   }

document.getElementById("myDiv").innerHTML=txt;