首页 > 代码库 > Ajax介绍及自己写异步对象

Ajax介绍及自己写异步对象

AJAX:”Asynchronous JavaScript and XML”

中文意思:异步JavaScript和XML。

Ajax是一种创建交互式网页应用的网页开发技术,不是指一种单一的技术,而是有机地利用了一系列相关的技术,简单理解为:JavaScript + XMLHttpRequest + CSS +服务器端 的集合.

创建Ajax的步骤:


//1.0创建异步对象
var xhr = new XMLHttpRequest();
//2.0设置参数
// 请求方式 请求路径 是否异步

//是否异步请求:如果改为false的话, 那么通过ajax去请求的话,就不会单独去开一个线程去请求页面了!所以页面会卡死,等响应内容回来之后才会继续运行。

xhr.open("get", "/Index.ashx", true);
//3.0
//3.1.0在路径后面加随机数(不推荐使用)
//因为get请求会有缓存,所以在ajax的get请求会被浏览器缓存起来。缓存有时候是可以提高性能,可是有的时候很烦人,

//那如果有的时候我们希望不要get请求没有缓存应该怎么办呢?(主要是针对ie浏览器的)

 // 消除缓存带来的麻烦
 // 1)在路径后面直接加个随机参数(缺点:占浏览器资源,每次请求都缓存起来,不推荐)

 //2) xhr.setRequestHeader(“If-Modified-Since”,0);(推荐使用,完美解决方案。)

xhr.setRequestHeader("If-Modified-Since", "0");

//4.0设置回调函数

//readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。

//0:未初始化。new完后;
//1:已打开。对象已经创建并初始化,但还未调用send方法
//2:已发送。已经调用send 方法,但该对象正在等待状态码和头的返回;
//3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整;
//4:已加载。所有数据接收完毕


xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
//5.0发送请求
xhr.send();

 

Ajax介绍及自己写异步对象