前端开发之ajax

ajax

JavaScript的同步和异步

JavaScript是一种单线程的语言,也就是说在JS引擎中负责解析和执行JavaScript的线程只有一个,这时候,所有的程序的执行就需要前面一个程序执行完成之后才会开始执行,这时候就带来了一个问题,如果前面的程序很长或者形成了死循环,那么后面需要被执行的程序就会一直处于等待状态,这就是同步的机制。

在浏览器这个应用场景中,为了解决一些同步带来的问题,所以就出现了异步这样一个概念,对于语言而言,它是只有一个主线程可以用,但执行到异步的时候,它会向浏览器提交请求并告诉它回调函数,然后由浏览器的另一个线程去调用之前的回调函数,而JavaScript的主线程会继续往下去执行代码。

ajax的定义与作用

ajax是Asynchronous JavaScript and XML的缩写,也就是异步的JavaScript和XML技术,这项技术能够实现向服务器请求数据的同时不让页面完全重载,使得Web应用程序更为迅速的回应用户操作,并避免在网络上发送那些没有被改变的数据,带来更好的用户体验。

对于传统的http请求,一般是由浏览器向服务器请求数据,服务器处理完成之后生成response,然后服务器将response反馈给浏览器,浏览器解析response刷新整个页面,这时,即便是很小一部分的页面元素被改变也会刷新整个页面,也就是为改变的部分也会被刷新,这会加重服务器的负担,也会让反馈时间变长,这种处理方式效率不高,用户体验也差;一个web工作的原则就是一个http请求对应一个页面,要想让用户停留在页面中,同时发送http请求,就必须使用JavaScript来发送这个请求,接收到数据后,再用JavaScript来操作DOM树,对页面的某个部分进行更新,这也就是ajax的作用,它给人的感觉就是页面可以不断地更新,但页面依然停留在这里而没有被刷新。

一个简单封装的JavaScriptajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function ajax(opts){
var xml = new XMLHttpRequest(); // 创建XMLHttpRequest,用户后台与服务器交换数据
xml.onreadystatechange = function(){
if(xml.readyState === 4 && xml.status === 200){ // 4代表响应完成,并可以获取
// 和相应服务器的数据,状态码200代表相应正常,则成功,执行相应的操作
console.log("success");
opts.success(xml.responseText);
}
if(xml.readtState === 4 && xml.status === 404){
// 404代表not found,所请求的资源不存在或者被删除,这时执行报错
opts.error();
}
}
var strNew = "";
for(var i in opts.data){
strNew += i + "=" + opts.data[i] + "&";
}
strNew = strNew.replace(/\&$/,"");
// 创建一个新的对象,用传入数据的格式将要传入的数据保存在其中,以待使用
if(opts.type === "get"){ // 当是get的方式的时候,执行下面的操作
xml.open(opts.type,opts.url + "?" + strNew,true);
xml.send();
}
if(opts.type === "post"){ // 如果是post,则执行下面的操作
xml.open(opts.type,opts.url,true);
xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 为添加或修改http头提供一个接口方法
xml.send(strNew);
}
}