Ajax基本原理与实现

Ajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML），其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

不是新的编程语言，而是一种使用现有标准的新方法。

最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。(局部刷新)

AJAX运行环境：浏览器

AJAX技术早就出现了，2005年google suggest项目采用Ajax技术，页面展示非常丰富效果，用户感受非常良好，使Ajax技术一夜爆红，到现在都是web开发中必不可少的技术之一！

1、关于同步和异步：客户端和服务器端相互通信的基础上
异步传输是面向字符的传输，它的单位是字符；
而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

同步的话，必须这个操作完了才会执行下一步，在等待期间浏览器会挂起不能执行任何接下来的js代码；异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后就继续执行下一步了，等到结果返回来了，浏览器会通知js执行相应的回调。

2、Ajax工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 Ajax请求，其实就是利用浏览器内核模拟表单提交，达到页面不刷新的效果，接收服务器的响应，实现局部更新。

3、Ajax请求：

XMLHttpRequest：Ajax对象的核心（代表浏览器内核）

XMLHttpRequest对象：用于在后台与服务器交换数据，这意味着可以在不刷新整个网页的情况下，对网页的某部分进行更新。

<script>var xmlhttp;function init() {if (window.XMLHttpRequest){//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码；创建XMLHttpRequest对象xmlhttp=XMLHttpRequest;}else{// IE6, IE5 浏览器执行代码；不存在，使用ActiveXObjectxmlhttp = new ActiveXObject("Microsoft.XMLHTTP")}}
</script>

向服务器发送请求：将请求发送到服务器，主要使用 XMLHttpRequest 对象的 open() 和 send() 方法：

1、open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理；

2、send() 方法将请求送往服务器。

xmlhttp.open("GET","/jquery/ajaxServlet",true);
xmlhttp.send();

GET OR POST：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用，但是在有些情况下，必须使用 POST 请求；【 Ajax请求，只能提交文本字符，所以像上传内容等功能，必须通过表单post提交】

function doGet(){xmlhttp.open("GET","/jquery/ajaxServlet",true);//未提交数据xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//已提交数据，异步xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//已提交数据，同步xmlhttp.send();
}
function doPost() {xmlhttp.open("Post","/jquery/ajaxServlet",true);//未提交数据xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//已提交数据xmlhttp.send("fname=向&lname=洋");//上传文本字符；send(String)仅针对post请求，用来传递数据
}

4、Ajax响应

responseText：获得字符串形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

5、Ajax事件

onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当监听到ajax对象的readyState 值改变的行为时，就会触发 onreadystatechange 事件，eadyState 属性存有 XMLHttpRequest 的状态信息，下面是 XMLHttpRequest 对象的三个重要的属性：

ajax 状态码 - xhr.readyState：是用来表示一个 ajax 请求的全部过程中的某一个状态，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据。

onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务，当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function() {// alert(xmlhttp.readyState);if (xmlhttp.readyState==4 && xmlhttp.status==200){// alert(xmlhttp.responseText);document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新}
};

7、jquery Ajax：与Ajax本质没有任何区别。知识换了jquery语法进行了封装，便于使用

Jquery底层ajax实现。

原生JS实现：

<script>var xmlhttp;function init() {if (window.XMLHttpRequest) {//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码//创建XMLHttpRequest对象xmlhttp=new XMLHttpRequest();}else {// IE6, IE5 浏览器执行代码//不存在，使用ActiveXObjectxmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}}//提交表单，页面不会有刷一下，用户感受提升//get方法通过?的方式传递数据，执行参数function doGet(){// xmlhttp.open("GET","/jquery/ajaxServlet",true);xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",true);//异步请求// xmlhttp.open("GET","/jquery/ajaxServlet?fname=向&lname=洋",false);//状态变化注册xmlhttp.onreadystatechange=function() {// alert(xmlhttp.readyState);if (xmlhttp.readyState==4 && xmlhttp.status==200){// alert(xmlhttp.responseText);document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新}};xmlhttp.send();// alert(xmlhttp.responseText);}function doPost() {xmlhttp.open("Post","/jquery/ajaxServlet",true);// xmlhttp.open("Post","/jquery/ajaxServlet",false);//false代表同步请求，一般不太使用，效率太低//异步请求：send将数据传输给浏览器，浏览器还没返回响应，主程序已经在执行下一句了，导致responseText为null//同步请求：send将数据传输给浏览器，浏览器返回响应后，主程序获取responseText的数据展示；一般不太使用，效率太低xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//内容上传文本字符//状态变化注册xmlhttp.onreadystatechange=function() {// alert(xmlhttp.readyState);if (xmlhttp.readyState==4 && xmlhttp.status==200){// alert(xmlhttp.responseText);document.getElementById("resDiv").innerHTML=xmlhttp.responseText;//局部更新}}xmlhttp.send("fname=向&lname=洋");//send(String)仅针对post请求，用来传递数据// alert(xmlhttp.responseText);}
</script>

jQuery实现：

1、$.ajax()

        $("#jqueryAjax").click(function () {$.ajax({type: "get",url: "/jquery/ajaxServlet",data: "fname=John&lname=Boston",success: function(msg){alert( "Data Saved:::: " + msg );}});});

2、$.get()：发送get请求(ajax的简化)

语法：$.get(url, [data], [callback], [type])

        $("#jqueryGet").click(function () {$.get("/jquery/ajaxServlet", { fname: "John", lname: "2pm" },function(data){alert("Data Loaded: " + data);});});

3、$.post()：发送post请求(ajax的简化)

语法：$.post(url, [data], [callback], [type])

        $("#jqueryPost").click(function () {$.post("/jquery/ajaxServlet", { fname: "John", lname: "2pm" },function(data){alert("Data Loaded: " + data);});})