Ajax知识基础
一、Ajax的简介:Asynchronous JavaScript and XML(异步的 JavaScript 和XML)
①Ajax不是某种语言
②Ajax是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术
③传统的页面(不使用Ajax)如果需要更新内容,必需重载整个网页面(有很多使用Ajax的应用程序案例:新浪微博、Google地图等等。)
二、同步 与 异步
①同步:就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去。
②异步:是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态,当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。
异步实现的过程:①运用HTML与CSS来实现页面,表达信息;
②运用XMLHttpRequest和web服务器进行数据的异步交换;
③运用JavaScript操作DOM,实现动态局部刷新。
三、Ajax—创建XMLHttpRequest对象
(1)什么是XMLHttpRequest对象?
XMLHttpRequest对象用于在后台与服务器交换数据。
(2)创建XMLHttpRequest对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari以及Opera)均内建XMLHttpRequest对象。
(3)创建XMLHttpRequest对象的语法:
var xhr = new XMLHttpRequest();
老版本的Internet Explorer(IE5和IE6)使用ActiveXObject对象
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括IE5和IE6 ,请检查浏览器是否支持XMLHttpRequest对象;如果支持,则创建XMLHttpRequest对象。如果不支持,则创ActiveXObject;(兼容性的处理)
四、Ajax—服务器发送请求
(1)向服务器发送请求,我们使用XMLHttpRequest对象的open() 和 send()方法
①open(method,url,asyns)规定请求的类型、URL 以及是否异步处理请求。
参数说明:
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步) 或 false(同步)
②send (string):将请求发送到服务器
参数说明:string 仅用于POST请求
(2)一个简单地GET请求:
xhr.open("GET","/Ajax02/getInfor",true)
xhr.send();
(3)一个简单地POST请求:
xhr.open("POST","/Ajax02/getInfor",true)
xhr.send();
五、响应头
(1)如果需要像HTML表单那样提交post数据,需要使用setRequestHeader()来添加HTTP头,然后在send()方法中规定您希望发送的数据;
(2)setRequestHeader语法:
setRequestHeader(header,value):向请求添加HTTP头
参数说明:
header:规定头的名称
value:规定头的值
六、Ajax服务器响应
使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应
① responseText:获得 字符串 形式的响应数据。
② responseXML:获得 XML 形式的响应式数据。
七、Ajax onreadystatechange事件
在XMLHttpRequest对象中,readyState属性存有XMLHttpRequest的状态信息, 每当readyState改变时,就会触发onreadystatechange事件。
八、下面是XMLHttpRequest对象的三个重要属性:
(1)onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数
(2) readyState:存有XMLHttpRequest的状态。从0到4发生变化。
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
(3)status: 200:”OK” ; 400:未找到页面
在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备
当readyState等于4且status为200时,表示响应已就绪;
九、通过XMLHttpRequest对象向我们的控制器中提交表单数据
(1)post的提交方法一:①此方法需要拼接一个串,如下图;
②需要设置响应头,如下图;
(2)post的提交方法二:需要创建FormData()对象,创建之后通过append()以键值对的形式传入参数