Ajax原理+入门案例

1 什么是Ajax

1.1 概念

Ajax（Asynchronous Javascript And XML）（异步的 JavaScript 和 XML）是一种借助客户端脚本语言（JavaScript）快速创建动态页面的Web应用技术。其本质是请求服务端的少量数据，从而达到快速更新页面的，即异步请求，局部刷新其核心是Ajax引擎。

2 技术出现背景

每一个新技术的出现，都是在解决和优化在业务上的痛点和效率问题，而Ajax技术的出现解决了在客户端不能异步请求的问题。
Ajax引擎可以把Ajax看成是一个线程池，存储的是线程资源，当你需要请求服务器端的数据的时候，在传统的情况下是执行同步操作（只有一个线程），即发出一个请求之后，你之能等着服务器的响应，在Ajax方式下可以发出多个请求，因为其余的线程会由Ajax引擎创建，使得请求异步进行,不能进行跨域访问，但是现在也出现了支持跨域访问的技术。

2.1 传统的方式服务器做出响应的原理

2.2 Ajax方式服务器做出响应的原理

3 Ajax入门

3.1 请求响应原理

Ajax请求会基于DOM（HTML元素）事件，XHR（XMLHttpRequest）对象，实现与服务端的异步请求局部刷新。

3.2 请求步骤

1.创建XHR对象
2.注册XHR对象监听，通过回调函数处理状态信息
3.建立与服务端的连接
4.发送异步请求实现与服务端的通信
5.通过回调函数获得结果信息并且做出响应

3.3 通过Google浏览器编写Ajax案例

function ajaxDemo(url,params,callback){
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            callback(xhr.responseText);
        }
    }
     xhr.open("GET",url+"?"+params,true);
     xhr.send(null);
}