AJAX原理

aysnchronous JavaScript and xml

创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个页面的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新

xml：可扩展标记语言，标准通用标记语言的子集

用于标记电子文件使其具有结构性的标记语言

结构：第一句是声明语句

<?xml version="1.0" encoding="utf-8"?>

和html不同，他的标签名大小写敏感

AJAX的实现

使用js向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest
通过这个对象，js可以在不重载原页面的情况下和web服务器交换数据

ajax在浏览器和web服务器之间使用异步数据传输，这样可以让网页请求更少的信息

缺点：会破坏浏览器的后退功能，浏览器只能记录静态页面，ajax会修改页面…

实现过程

和传统的相比，添加了一个中间件ajax引擎在客户端和服务端之间

XMLHttpRequest对象的三个常用属性

onreadystatechange

存储服务器响应的函数

readyState

readyState属性存有服务器响应的状态信息，每次readyState被改变，onreadystatechange函数就会被执行
四个值
0 请求未初始化
1 请求已提出
2 请求已发送
3 请求处理中
4 请求已完成

这两个搭配使用就是

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        //从服务器的response获得数据
    }
}

判断当前readyState的值然后执行对应函数方法

responseText
通过这个responseText来获取服务器返回的数据
和前面的配合一起使用，当请求成功的时候，把时间的值设置为返回的数据的值

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

还有一些其他的属性：

XMLHTTPRequest的常用方法

open（）
open有三个参数，
第一个参数定义发送请求使用的方法，
第二个参数规定服务器端脚本的url，
第三个参数规定应当对请求进行的异步处理

xmlHttp.open(“GET”,“test.php”,true);

send（）

用于将请求送往服务器

xmlHttp.send(null);

其他方法

使用步骤

1.创建XMLHTTPRequest对象
2.设置请求方式
3.调用回调函数
4.发送请求

1.创建XMLHTTPRequest对象

var xmlhttp = new XMLHttpRequest();

如果严谨的写就是要做一个判断，看她是否支持XMLHTTPRequest对象，因为低版本的是用ActiveX对象的

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

设置请求方式

有get和post两种
通过之前那个open（）来设置

var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);

补充一下get和post的区别
post的请求内容都放在请求的body里面，更加安全，容量也大，get的内容在url中，长度会受限制
get产生一个tcp数据包，一次性发送，返回200
post产生两个，第一次发送header，返回100，第二次发送内容，返回200
get只支持url编码，而post支持多种

调用回调函数
回调函数写在前面的哪个属性onreadystatechange内

//第三步：注册回调函数
 
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        } else {
            alert("AJAX服务器返回错误！");
        }
    }
}

两个都判断一下，为状态值4，发出请求，状态码200请求成功