ajax

1. 什么是ajax

AJAX即 “Asynchronous JavaScript And XML”（异步JavaScript 和 XML），是指一个创建交互网页应用的网页开发技术，可以用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX可以是网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，刚好解决了传统方法的缺陷。
异步： 浏览器在请求数据的过程中，不会一直等待这段时间还可以做其他操作；
同步： 浏览器在请求数据的过程中，会一直等待事件的相应，直到返回结果才会执行其他操作；

2. ajax的使用

1. 创建XMLHTTPRequsest对象
2. 使用open方法设置和服务器的交互信息
3. 设置发送的数据，开始和服务器端交互
4. 注册事件
5. 更新界面

1. get请求

步骤一：创建异步对象
var ajax = new XMLHttpRequest();

步骤二：建立连接  open(method,url,async)	method:get post	async:是否异步，默认是true
request.open("get","路径",true);

步骤三：发送请求
request.send();

步骤四：监听结果
// 0:创建异步对象;
// 1:建立连接;
// 2:向服务器发送了请求;
// 3:服务器已经接收到了请求，正在处理，但是没有完全处理完;
// 4:服务器已经相应完成，并且将结果返回;
request.onreadystatechange = function () {
   if(request.readyState === 4){
       if(request.status === 200){; //网络状态200：请求成功，404找不到路径
           console.log(request.responseText);
       }
   }
}

2.post请求

1.创建请求对象
var request = new XMLHttpRequest();

2.建立连接
request.open("post","路径",true);

//设置请求头
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

3.发送请求，请求参数
request.send("count=15");

4.监听结果
request.onreadystatechange = function () {
     if(request.readyState === 4){
         if(request.status == 200){
             console.log(request.responseText);
         }
     }
 }

3. 封装

function ajax(reqMes){
     //1.创建对象
     var request = new XMLHttpRequest(); //非ie6的创建
     //new ActiveXObject("Microsoft.XMLHTTP")//ie6的创建

     //2.建立连接
     if(reqMes.type.toLowerCase() === "get"){
         //如果有请求参数，就拼接到url后面，如果没有就不拼
         reqMes.url  = reqMes.data ? reqMes.url+"?"+reqMes.data : reqMes.url;
         request.open("get",reqMes.url,true);
         request.send();
     }else{
         request.open("post",reqMes.url,true);
         reqMes.data ? request.send(reqMes.data): request.send();
     }

     //4.监听状态
     request.onreadystatechange = function () {
         if(request.readyState === 4){
             if(request.status === 200) {
                reqMes.success(request.responseText);
             }
         }
     }
 }

 var s = ajax({
     "url":"bendi.txt",
     "type":"get",
     "success":function (data) {
         console.log(data);
     }
 });
 console.log(s);

 //回调函数：某个动作做完以后执行的函数  callback
 //创建对象，建立连接，发送请求，监听结果----结果（回调函数）

4. 解析后台数据

 var oUl = document.getElementsByTagName("ul")[0];
ajax({
    "url":"arr.txt",
    "type":"get",
    "success":function (data) {
        console.log(data); //“”
        //eval(); 计算一个字符串，并执行里面的代码
        console.log(eval(data));
        console.log(eval("1+2"));//3

        var arr = eval(data);
        for(var i = 0;i<arr.length;i++){
            oUl.innerHTML += "<li>"+arr[i]+"</li>";
        }
    }
})

5. 解析json数据

ajax({
   "url":"mes.json",
   "type":"get",
   "success":function (data) {
//            console.log(eval("("+data+")")); //js中，以{}开头，默认是块
//
//            //将字符串json，转换真正的json对象
//            console.log(JSON.parse(data));

       //将json对象，转换为字符串的形式
       console.log(JSON.stringify(data));
       console.log(data);
   }
})