Ajax相关知识点

Ajax，即Asynchronous JavaScript and XML（异步的JavaScript和XML），它不是一种新的语言，而是一种快速创建动态网页的技术。Ajax通过在后台与服务器进行数据交换，在不重新加载整个页面的情况下更新网页的部分内容。同时，它的使用也会有一些影响，比如影响后退按钮和收藏夹。使用场景包括：电商网站中更新购物车、微博点赞功能等。
实现方式：
1. 运用HTML和CSS来实现页面，表达信息；
2. 运用XMLHttpRequest对象和Web服务器进行数据的异步交换；
3. 运用JavaScript操作DOM，实现动态局部刷新。

创建XMLHttpRequest对象

var xhr;
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // IE7+、Firefox、Chrome...
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE6以下
}

XMLHttpRequest向服务器发送请求
需要使用XMLHttpRequest对象的open(method,url,async)和send(string)。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send()方法，当请求方式是get时，send可以没有参数，或者为null；当请求方式是post时，可以将传送内容以string方式发出，也可以为空，附加在url后面。

get请求：一般用于信息获取，使用url传递参数，对所发送信息的数量也有限制，一般2000个字符；
post请求：一般用于修改服务器上的资源，对所发送信息的数量没有限制；
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）；
向服务器发送大量数据（POST 没有数据量限制）；
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

使用post请求方式时，使用表单post数据时要设置Http头信息，setRequestHeader(header,value)，最常用设置的头信息”application/x-www-form-urlencoded”。写在open()和send()方法之间，否则会抛出异常。

xhr.open("POST","ajax_test.asp",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Bill&lname=Gates");

获得服务器的相应
responseText:获得字符串形式的响应数据，如果来自服务器的响应并非 XML，请使用 responseText 属性
responseXML:获得XML形式的响应数据，如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。
readyState属性的值：
0. 0：请求未初始化，open()方法还没有被调用
1. 1：服务器连接已经建立，open()被调用
2. 2：请求已接收，也就是接收到头信息了
3. 3：请求处理中，也就是接收到相应主体了，已接收到部分数据
4. 4：请求完成，且响应已就绪，也就是响应完成了

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

xhr.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {     document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
  }

Ajax中同步与异步的区别

简单来说，同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果。同步是在一条直线上的队列，异步不在一个队列上各走各的异步：在异步模式下，当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。同步：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出现假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。在同步模式下，当我们使用AJAX发送完请求后，后续还有代码需要执行，我们同样将服务器响应交由另一个JS函数去处理，但是这时的代码执行情况是：在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时，包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样，请求发出后就进入阻塞状态，直到解除阻塞余下的代码才会继续执行。如果采用同步的方式，就失去了Ajax的意义。

Ajax相关知识点

相关文章