原生Ajax基础

知识点一：什么是ajax

1、ajax是异步的XML和JavaScript。。

2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。。

3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

4、AJAX 可以使网页实现异步更新

5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

知识点二：ajax的四步原理

第一步：创建XMLHTTPRequest的实例对象

第二步：告诉浏览器我要请求的地址以及请求方式

第三步: 敲回车，发送请求给后台

 

第四步：后台验证信息返回数据给前台页面

 

案例

var xmlhttp;

if(window.XMLHttpRequest){

    // 标准浏览器或者是ie7+

    xmlhttp = new XMLHttpRequest(); 

}else{

    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

}

xmlhttp.open('get','http://yapi.shangyuninfo.com/mock/156/bookType');

xmlhttp.send();

xmlhttp.onreadystatechange = function (res) { 

    // ajax 的状态码 有5种  0-4 readyState

    // http的请求 5种 1xx  2xx 3xx 4xx  5xx 

    if(xmlhttp.readyState == 4 && xmlhttp.status ==200){

         console.log(res.currentTarget.response)

         var result = JSON.parse(res.currentTarget.response);

         console.log(result.book[0].typeList)

    }

}

知识点三 ajax的状态码和http的状态码

ajax状态码：0状态初始化 1发送请求 234接受处理数据

http状态码： 1xx 客户端 2xx代表请求成功 3xx 重定项代码，也是常见的代码 4xx路径问题 5xx服务器

 

 知识点四：JSON