对 Ajax 的一次复盘

2017-12-29 本文已影响20人果汁凉茶丶

Ajax = Asynchronous JavaScript and XML 即为异步的 JavaScript 和 XML，它并不是新的编程语言，而是一种使用现有标准的新方法，最大的优点在于不需要重新更新整个页面的情况下，可以与服务器交换数据并更新部分的网页内容。

Ajax 的工作原理

ajax原理图例

Ajax 的一个实例

在浏览器上实现ajax主要依靠XMLHttpRequest来实现，而XMLHttpRequest对象用户和服务器交换数据

// define callback
function suc (text) {
  var t = document.getElementById('resp-text');
  t.value = 'ajax response success'
}

function fail (code) {
  var t  document.getElementById('tesp-text');
  t.value = 'Error code: ' + code 
}

// new XMLHttpRequest
var request = new XMLHttpRequest();

// run callback when state changed
request.onreadystatechange  = function () {
  if (request.readyState === 4) {    // ajax has responced
    if (resquest.status === 200) {   // judged result by response code
      return suc(request.responceText);  // get responce text
    } else {
      return fail(request.status);
    }
  } else {
    // http request keeping...
  } 
}

// all thing Readiness, just do it
request.open('GET', '/api/categories');
request.send();

alert('request has send, please wait...')

AJAX是基于现有的Internet标准，主要应用了

XMLHttpRequest对象，（异步的与服务器交互数据）
Javascript/Dom，（信息显示/交互）
CSS，（给数据定义样式）
XML 作为数据转换的格式

AJAX 实现过程

XMLHttpRequest（xhr）是ajax的基础，现在所有的浏览器都支持xhr对象，他用于在与服务器做数据交换，这意味着，在不重新载入整个页面的情况下，对网页的某部分进行更新。
现代浏览器(ie5,ie6除外)均内建了XMLHttpRequest，因此我们new一个即可

创建xhr
variable = new XMLHttpRequest()
IE5和IE6则使用
ActiveXObject("Microsoft.XMLHTTP")

所以新建xhr如下所示

var xmlhttp
if(window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest()
} else {
    xmlhttp = new ActiveXObject('Microsoft XMLHTTP')
}

将xhr的数据发送到服务器，我们使用open()和send()方法

xmlhttp.open(method, url, async);
xmlhttp.send(str);  // get 无参数

open()函数接受三个参数，请求方法，文件在服务器上的位置，aysnc请求true（异步）false（同步）
send()接口接受1或0个参数，get请求不带参数，post表示发送给服务器的参数

xhr的第一个参数：method

什么时候用GET，什么时候用POST
与post相比，get更简单也更快，并且在大部分情况下都是适用的，但一下情况更适合适用post

无法使用缓存文件（更新服务器上的文件或数据库）
与服务器发生大量数据交互（实验过get携带800k以上数据时就会发生异常，post不限制）
发送包含未知字符的用户输入时，（get参数在url上，有可能被转义或编码等）

实践一下 - get

xmlhttp.open('GET', '/try/ajax/get.html', true)
xmlhttp.send()

我们知道浏览器有缓存机制，第一次请求后在发起相同请求时，得到的可能是缓存的结果。缓存是因为浏览器在向服务发起请求时检查资源是否被修改，未发生修改则不重新下载，但这往往会因为检查问题无法获取最新的资源，造成困扰。为了避免这种情况，qingxiang请向url上传递一个唯一的id（通常是随机数）

xmlhttp.open('GET', '/try/ajax/get.html?rand=' + Math.random(), true)
xmlhttp.send()

实践一下 - post

xmlhttp.open('POST', 'try/ajax/post.html', true)
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send({ 'rand=' + Math.random() + '&version=1.0.0'})

post方式一般需要增加请求头，表示发送给服务端参数的数据格式类型，如果是json/application,则send的参数就是json格式

xhr的第二个参数： url

很直观的参数：资源路径；就是请求服务器资源的位置，可以是任何类型的文件。我们不仅能用url访问一个网站，还能用绝对路径方式访问到各个具体文件

xhr的第三个参数： async

ajax的核心就是异步，true表示允许异步，false则使用同步请求。
如果xhr要使用ajax时，第三个参数必须置为true
Ajax的异步，是解决程序因等待某个较大的脚本文件或请求的执行完成而导致程序阻塞的跨越性进步，通过ajax，javascript能够无需等待服务的响应，而再等待服务响应的时候执行其他脚本，当响应就绪后再对其进行处理。
onreadystatechange 事件规定了事件在就绪状态时执行的函数

xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById('respText') = xmlhttp.responseText
  }
}
xmlhttp.open('GET', '/try/ajax/demo.html', true)
xmlhttp.send()

xhr的服务响应

XMLHttpResponse对象有两个响应属性，responseText（以字符串形式接收响应）或 responseXML（以xml形式接收响应），使用哪个决定于服务器给返回的数据类型是哪一种。常用responseText

Ajax的onreadystatechange事件

该事件是ajaHx处理业务逻辑的核心事件，当请求被发送到服务器时，服务器需要执行一些基于响应的任务，每当readyState改变时，就会触发 onreadystatechange事件，readyState存有XMLHttpResponse的状态信息

XMLHttpResponse 的三个基本且重要的基本属性，

onreadystatechange用于存储函数（函数名），当readyState改变时触发该函数
readyState 存储xhr的状态，从0-4发生变化； 0：请求未初始化； 1：服务器已建立链接； 2：请求已接收； 3：请求处理中； 4：请求已完成，且响应已就绪。
status 请求的状态； 200：成功返回； 404：未找到页面...

从上面可以看出，当readyState为4时且status为200时，就已经表示请求已经完，响应准备就绪，这时我们就可以处理后续的操作。
注意：onreadystatechange一共被触发5次，我们需要规定条件语句来执行我们想要执行的操作。

使用回调函数

回调函数是一种以参数的形式传递个另一个函数的函数。如果我们需要创建多个AJAX任务，为提高代码的复用性并降低耦合，我们需要为XMLHttpRequest对象编写一个标准的函数，并为每个ajax调用该函数。
该函数调用应该包含URL以及发生 onreadystatechange 事件时执行的任务（根据需求调用相应的逻辑）`

function myFunction(){
  loadXMLDoc('/try/ajax/ajax_info.txt', function(){
    if (xmlhttp.readyState==4 && xmlhttp.status == 200){
       document.getElementById('myDiv').innerHTML = xmlhttp.responseText; 
     }
  })
}