去年做页面的时候,提交表单,使用过Ajax:Ajax提交表单
之前的Web页面加载方式:
- 用户点击页面上的某一部分。
- 浏览器向服务器发出了一个请求。
- 服务器发回一个完整的新页面,其中包含所有已修改的信息。
- 用户点击页面上的另一处。
- 浏览器再向服务器发出一个请求。
- 服务器再发回另一个完整的页面。
大多数情况下,我们只是改变了一行文本或者一个图像。在之前的Web加载方式中,这样是很麻烦的。
改进之后的Web页面,使用Ajax:
- 用户点击页面上的某一部分。
- 页面创建一个特殊的请求对象,由浏览器发送给服务器。
- 服务器更新这个请求对象。
- 只更新页面中已经改变的部分。
利用Ajax,浏览器只会发送和接受页面中需要修改的部分。
有时浏览器根本不必与服务器通信
- 用户点击页面上的某一部分。
- 浏览器用脚本文件中的一个函数。
- 脚本更新图像根本不需要服务端程序。
- 脚本告诉浏览器如何更新页面,不存在页面的完全刷新。
Ajax为Web应用提供的好处
- 浏览器可以从服务器同时请求多项内容,利用异步请求,可以确保浏览器在后台工作,避免因完全页面刷新而中断用户的工作。
- 浏览器请求返回的速度会快很多,请求和响应的速度取决于服务器返回的内容。
- 只有页面中真正改变的部分会得到更新。
- 减少服务器数据流量,利用Ajax可以建立更小,更集中的请求。
- 用户可以在页面更新的同时继续工作。
- 有时无须与服务器往返通信就可以处理。
同步与异步
同步
异步
例如注册表单中,一边输入一边提示是否密码相同或者用户名是否已被注册等等....
通过使用XMLHttpRequest进行后台与服务器的数据交换和页面的部分更新。
三大模块
- 运用Html和Css来实现页面,表达信息。
- 运用XMLHttpRequest和Web服务器进行数据的异步交换。
- 运用Javascript操作DOM,实现动态局部刷新。
HTTP
查看我的专栏:Http学习笔记,里面有详细的说明,这里主要需要的知识:二,三,四,五。
一个完整的HTTP请求过程:
- 建立TCP连接
- Web浏览器向Web服务器发送请求命令
- Web浏览器发送请求头信息
- Web浏览器应答
- Web浏览器发送应答头信息
- Web浏览器向浏览器发送数据
- Web浏览器关闭TCP连接
XMLHttpRequest对象
创建对象(兼容所有浏览器版本)
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest(); // IE7+,FireFox,Chrome,Opera....
}else{
request = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5
}
XMLHttpRequest发送请求
用open可以指定get,post
一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。
var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);
(2)send发送为POST请求
也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方 法。首部相应概念
xmlHttpRequest.open("POST","login.jsp",true);
xmlHttpRequest.send("user="+username+"&pwd="+password);
XMLHttpRequest获取响应
responseText 获得字符串形式的响应数据
responseXML 获得XML形式的响应数据
status 和 statusText 以数字和文本形式返回HTTP状态码
getAllResponseHeader() 获取所有的响应报头
getResponseHeader() 查询响应中的某个字段的值
readyState
0:请求未初始化,open还没有调用
1:服务器连接已建立,open已经调用了
2:请求已接受,接收到头信息了
3:请求处理中,接收到响应主体了
4:请求已完成,且响应已就绪,响应完成
request.open("POST", "server.php");
request.send(data);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
document.getElementById("createResult").innerHTML = request.responseText;
} else {
alert("发生错误:" + request.status);
}
}
}