ajax介绍和使用

AJAX

ajax 是什么？
（异步JavaScript和XML）Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后， 网页程序能够快速地将渐步更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

AJAX有什么作用

在AJAX之前，WEB应用都要涉及大量的页面刷新：用户点击了某个链接，请求发送回服务器，然后服务器根据用户的操作再返回新页面。即便用户看到的只是页面中的一小部分有变化。也要刷新和重新加载整个页面。
使用AJAX后，就可以做到只更新页面中的一小部分，其他内容都不用重新加载。AJAX的主要优势在于对页面的的请求是以异步的方式发送到服务器。而服务器不会用整个页面来响应。他会在后台处理请求，与此同时用户还能继续浏览页面并与之交互。

写法

//创建一个浏览器内置对象
var xhr = new XMLHttpRequest();
//填写需要发送的方式，资源地址，和是否异步
xhr.open('GET','/hello.json?user=name',true)
//进行事件监听，是否load回来，如果回来对数据进行操作
xhr.addEventListener('load',function(){
//判断服务器返回的状态码status（必须是200到300之间）或者走缓存状态码为304
if(( xhr.status > 200 || xhr.status < 300 ) || xhr.status == 304){
    var data = xhr.responseText;
    console.log(data)
  }else{
    console.log('error')
  }
})
//内部出错（一般断网了）
xhr.onerror = function(){
  console.log('error')
}
//设置请求时间
xhr.timeout = 3000;
//请求时间没有过发生事件
xhr.ontimeout = function(e){......}
//发送数据
xhr.send();

什么情况下是onload呢

他会与后台发生联系并返回状态码，每次状态码的更新我们都可以监听到，当readyState变成4的时候，请求过程结束，开始返回服务器状态码
xhr.addEventListener('readystatechange',function(){
  console.log(xhr.readyState)    //2,3,4
})

所以ajax写的也可以写成

var xhr = new XMLHttpRequest();
xhr.open('GET','/hello.json',true)
xhr.addEventListener('readyStatechange',function(){
if(  xhr.readyState == 4 &&  (( xhr.status > 200 || xhr.status < 300 ) || xhr.status == 304)){
    var data = xhr.responseText;
    console.log(data)
  }else{
    console.log('error')
  }
})

如果是post请求，就要在最后面的shr.send()中添加需要发送的数据