一、AJAX 简介

  • AJAX 全称为 Asynchronous Javascript And XML，就是异步的 JS 和 XML。
  • 通过 AJAX 能够在浏览器中向服务器发送异步申请，最大的劣势：无刷新获取数据。
  • AJAX 不是新的编程语言，不是新的一门独立的技术，而是一种应用现有规范的新办法。

二、AJAX 的工作原理

  • Ajax 的工作原理相当于在用户和服务器之间加了一个中间层(Ajax 引擎)，使用户操作与服务器响应异步化。

三、AJAX 的特点

  • AJAX 的长处

    1. 能够无需刷新页面而与服务器端进行通信。
    2. 容许你依据用户事件来更新局部页面内容。

  • 毛病

    1. 没有浏览历史，不能回退
    2. 存在跨域问题
    3. SEO 不敌对

四、根本应用

// 1.创立XMLHttpRequest对象let xhrif (window.XMLHttpRequest) {  xhr = new XMLHttpRequest()} else if (window.ActiveObject) {  // 兼容IE6以下版本  xhr = new ActiveXobject('Microsoft.XMLHTTP')}// 2.设置申请信息xhr.open('get', 'http://localhost:3000/test_get')// 3.发送申请xhr.send() // get申请不传body参数，只有post申请应用/*      4.接管响应        - xhr.responseXML 接管xml格局的响应数据        - xhr.responseText 接管文本格式的响应数据*/xhr.onreadystatechange = function () {  /*          xhr.readyState 能够用来查看申请以后的状态            0: 对应常量UNSENT，示意XMLHttpRequest实例曾经生成，然而open()办法还没有被调用。            1: 对应常量OPENED，示意send()办法还没有被调用，依然能够应用setRequestHeader()，设定HTTP申请的头信息。            2: 对应常量HEADERS_RECEIVED，示意send()办法曾经执行，并且头信息和状态码曾经收到。            3: 对应常量LOADING，示意正在接管服务器传来的body局部的数据，如果responseType属性是text或者空字符串，responseText就会蕴含曾经收到的局部信息。            4: 对应常量DONE，示意服务器数据曾经齐全接管，或者本次接管曾经失败了        */  if (xhr.readyState == 4) {    let status = xhr.status    if ((status >= 200 && status < 300) || status == 304) {      options.success && options.success(xhr.responseText, xhr.responseXML)    } else {      options.error && options.error(status)    }  }}

五、解决 IE 缓存问题

  • 问题：在一些浏览器中(IE),因为缓存机制的存在，ajax 只会发送的第一次申请，残余屡次申请不会在发送给浏览器而是间接加载缓存中的数据。
  • 解决形式：浏览器的缓存是依据 url 地址来记录的，所以咱们只须要批改 url 地址即可防止缓存问题
xhr.open('get', 'http://localhost:3000/test_get' + Date.now())

六、AJAX 封装

// 格式化申请参数function formatParams(data) {  let arr = []  for (let name in data) {    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]))  }  arr.push(('v=' + Math.random()).replace('.', ''))  return arr.join('&')}function ajax(options) {  options = options || {} // 调用函数时如果options没有指定，就给它赋值{},一个空的Object  options.method = (options.method || 'GET').toUpperCase() // 申请格局GET、POST，默认为GET  options.dataType = options.dataType || 'json' // 响应数据格式，默认json  options.timeout = options.timeout || 30000  let params = formatParams(options.data) // options.data申请的数据  let xhr  // 思考兼容性  if (window.XMLHttpRequest) {    xhr = new XMLHttpRequest()  } else if (window.ActiveObject) {    // 兼容IE6以下版本    xhr = new ActiveXobject('Microsoft.XMLHTTP')  }  // 启动并发送一个申请  if (options.method == 'GET') {    xhr.open('get', options.url + '?' + params, true)    xhr.send(null)  } else if (options.method == 'POST') {    xhr.open('post', options.url, true)    // 设置表单提交时的内容类型    // Content-type数据申请的格局    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')    xhr.send(params)  }  // 设置无效工夫  setTimeout(function () {    if (xhr.readySate != 4) {      xhr.abort()    }  }, options.timeout)  /*    接管    options.success胜利之后的回调函数  options.error失败后的回调函数    xhr.responseText,xhr.responseXML  取得字符串模式的响应数据或者XML模式的响应数据  */  xhr.onreadystatechange = function () {    if (xhr.readyState == 4) {      let status = xhr.status      if ((status >= 200 && status < 300) || status == 304) {        options.success && options.success(xhr.responseText, xhr.responseXML)      } else {        options.error && options.error(status)      }    }  }}//根本的应用实例ajax({  url: 'http://localhost:3000/test_get',  method: 'get',  data: {    name: 'name',    age: 24,  },  success: function (data) {    console.log(data, 'asdasdsa')  },})

七、get/post

  • 能够应用后面封装的 ajax 函数
function get(url, data, callback) {  ajax({    url,    method: 'get',    data,    success(result) {      callback(result)    },  })}function post(url, data, callback) {  ajax({    url,    data,    method: 'post',    success(result) {      callback(result)    },  })}// 测试 getget('http://localhost:3000/test_get', { name: 'name', age: 24 }, function (  data) {  console.log(data, 'get')})// 测试 postpost('http://localhost:3000/test_post', { name: 'name', age: 24 }, function (  data) {  console.log(data, 'post')})