原生AJAX

局部刷新技术，异步请求
作用是请求后端接口 返回数据到前端前端根据需求渲染数据到界面

一.五步法

1.创建对象	var http=new XMLHttpRequest();
2.建立连接	http.open()
3.发送请求	http.send()
4.监听事件	http.onreadystatechange=function(){}
5.渲染界面

1.创建ajax对象

var http=new XMLHttpRequest();

2.建立连接

2.1 格式

http.open('get', url, true)
http.send('post', data)

2.2 参数解释

2.3 参数理解

2.3.1 get和post

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

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

1.get方式

http.open('get', 'www.baidu.com', true)
http.send()

2.post方式

http.open('post', 'www.baidu.com', true)
http.send('fname=Bil&lname=Gates')

2.3.2 同步异步

同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。
同步：等待请求完成之后在执行后续代码 false
异步：请求和后续代码同时执行 true

3.事件监听

http.onreadystatechange=function(){
	 http.status
     http.readyState 
     http.response
     http.responseText
     http.responseXML
}

3.1 两种连接状态参数

	参数
status	200：服务器响应成功 500：服务器报错 404：服务器丢失
readyState	0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪

3.2 三种返回数据

http.response
http.responseText
http.responseXML

二.兼容性处理

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

三.AJAX封装

异步执行，通过回调函数实现

function Ajax(method, url, data, callback) {
      var http;
      //兼容性处理
      if (window.XMLHttpRequest) {
        http = new XMLHttpRequest()
      } else {
        http = new ActiveXObject("Microsoft.XMLHTTP")
      }
      //判断方式是get还是post
      if (method = 'get') {
        if (data) {
          url += '?'
          url += data
        }
        http.open(method, url)
        http.send()
      } else {
        http.open(method, url);
        if (data) {
          http.send(data)
        }
        http.send()
      }
      //事件监听
      http.onreadystatechange = function () {
      //判断是否建立连接
        if (http.readyState == 200 && http.status == 4) {
          callback(http.response);
        }
      }
    }
    var res = null;
    //用回调函数返回所需数据
    Ajax("get", "http://localhost:63342/web前端课程1017/0110/data/city.json", null, function (result) {
      var data = eval(result);
      res = data;
    });