Ajax
同步请求
客户端发送请求后,如果服务端没有做出完整的响应,客户端只能处于等待状态,没法进行其他的操作。同步通信的情况下服务器完成响应后需要刷新整个页面,通信效率低。
异步请求
客户端只管发送请求,不考虑服务器是否将结果响应回来,客户端在服务器没有完成响应的时候,不需要处于等待状态,可以继续访问系统的其他功能。
给用户的体验就是响应速度变快(改善用户体验),异步可以做到页面的局部刷新,加载数据量变小。
例如:百度关键字搜索的检索,自动填充;百度地图局部刷新等
Ajax应用
ajax实现的客户端和服务端异步通信
AsynJavascriptAndXml:异步的JavaScript和xml技术
Ajax技术发送请求的原来的提交表单、点击超链接不一样;需要借助JavaScript发送请求,借助xml文件进行数据的传递(实际应用中我们用json进行数据的传递,json进行数据传递更节省资源),服务器响应给客户端的数据需要使用JavaScript进行渲染,将数据在浏览器进行显示。
ajax原理
- 浏览器将请求给,浏览器的对象(JavaScript对象XMLHttpRequest)
- 然后XMLHttpRequest对象将请求发送给服务器,
- 服务器响应回来的数据给XMLHttpRequest对象
- 最后XMLHttpRequest对象将响应的数据渲染到浏览器
ajax的open()方法说明
Ajax的open()方法有3个参数:1、method;2、url;3、boolean;
参数1有get和post两个取值
参数2表示什么就不用说了
重点说下第3个参数:boolean的取值
当该boolean值为true时,服务器请求是异步进行的,也就是脚本执行send()方法后不等待
服务器的执行结果,而是继续执行脚本代码;
当该boolean值为false时,服务器请求是同步进行的,也就是脚本执行send()方法后等待
服务器的执行结果的返回,若在等待过程中超时,则不再等待,继续执行后面的脚本代码!
ajax的XMLHttpRequest对象的五种状态
0 对象刚刚创建好
1 调用了open的方法进行了
2 xhr给服务器发了请求,服务器接受请求
3 服务器开始响应,但是还没有响应完成
4 服务器完成响应(响应头和响应体)
ajax中send()方法说明
当get时,open中的url拼好参数,send中不传参数
当post时,open中不带参数,send中传入参数
一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为空。
例如:
var url = “login.jsp?user=XXX&pwd=XXX”;
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);
此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
例如:
xmlHttpRequest.open("POST","login.jsp",true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);
需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法。
ajax中的回调函数
Ajax请求是异步执行的,要通过回调函数获得响应。写AJAX主要是依靠XMLHttpRequest对象。当创建XMLHttpRequest对象后,要先设置onreadystatechange的回调函数。在回调函数中,通常我们只需通过readyState === 4判断请求是否完成,如果已完成,再根据status === 200判断是否是一个成功的响应。
Javascript的精髓有了两个,一个是事件,一个是异步。之所以有事件的存在就是因为js有异步的特点。用事件来监听程序的运行,最经典的就是ajax的request.onreadystatechange = function () { } // 当send()发送请求后,整个函数就执行完毕,这时只能用on事件来监听状态发生变化,并进行函数的回调,执行回调函数。