XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的,非W3C标准.,所以XMLHttpRequest在不同浏览器上的实现方法不统一,但在不同浏览器上的实现是兼容的。
(1) onreadychange:
通信状态改变的事件触发器,每次readyState属性的改变都会触发 readystatechange事件。
(2) readyState:通信状态,值为数值。 readyState
值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4
。
(3) status:
服务器返回的状态码。
常用状态码及其含义:
a. 404
-- 没找到页面(not found)
b.
403 --
禁止访问(forbidden)
c. 500
-- 内部服务器出错(internal service error)
d. 200
-- 一切正常(ok)
e.
304 --
没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
(4)
responseText: 从服务器发送的响应数据
注意: 只有当 readyState 属性值变成 4 时,
responseText 属性才可用,表明 Ajax 请求已经结束。
(5)
responseXML: 如果服务器返回的是 XML, 那么数据将储存在 responseXML
属性中。
注意: 只用服务器发送了带有正确首部信息的数据时, responseXML
属性才是可用的。所以,修改 MIME 类型为 text/xml
(即contentType="text/xml")
(6) statusText:服务器返回的状态文本信息
XMLHttpRequest对象方法:
(1) abort(); --
停止当前请求
(2) getAllResponseHeaders() ;
-- 把http请求的所有响应首部作为键/值对返回
(3) getResponseHeader("headerLabel")
; -- 返回指定首部的串值
(4)
open(“method”,”uri”,asynch); --
建立对服务器的调用
第一个参数:HTTP请求方式。可以是GET或POST(按照HTTP规范,该参数要大写
)。
第二个参数:请求页面的URL,可以是相对URL或绝对URL。
第三个参数:设置请求是否为异步模式,默认值为true(异步模式)。
注意:a
.若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符)。若需要向服务器发送数据,用POST。
b .
如果以POST方式请求,必须先调用setRequestHeader方法,修改MIME类别。
eg:xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
(5) send(data);
--
向服务器发送请求。若采用的GET请求方式,send(null)就可以了(即使send非空值,服务器也接收不到)。
(6) setRequestHeader("head", "value")
; --
设置指定首部数值。首部信息是一系列描述请求的元数据(metadata),首部信息用来声明一个请求是 GET 还是
POST方式。
第一个参数:首部的名字。
第二个参数:首部的值。
eg: //
声明POST请求
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
XMLHttpRequest对象初始化代码:
-
Function createXmlHttpRequest(){
-
var
xmlhttp
=
null
;
-
try{
-
//Firefox, Opera 8.0+, Safari直接new创建XMLHttpRequest对象
-
xmlhttp
=
new
XMLHttpRequest();
-
}catch(e){
-
//IE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
-
var
MSXML
=
-
['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
-
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
-
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
-
for(var
n
=
0
; n
<
MSXML.length
; n ++){
-
try{
-
xmlhttp
=
new
ActiveXObject(MSXML[n]);
-
break;
-
}catch(e){}
-
}
-
}
-
return xmlhttp;
-
}
2. 指定响应处理函数
指定当服务器返回信息时客户端的处理方式.
(1)
首先,它要检查XMLHttpRequest对象的readyState值,判断目前的通信状态。
if (http_request.readyState == 4) {
// 信息已经返回,可以开始处理
} else {
// 信息还没有返回,等待
}
(2) 其次,还需要判断返回的HTTP状态码,确定返回的页面没有错误。
if (http_request.status == 200) {
// 页面正常,可以开始处理信息
} else {
// 页面有问题
}
eg:
var xhr =
createXmlHttpRequest();
//XmlHttpRequest
初始化
xhr.onreadystatechange = function(){
if(xhr.readyState == 4) {
if(xhr.status == 200 )|| xhr.status == 304){
alert(xhr.responseText);
}
}
}
3.
发出HTTP请求
这一步调用XMLHttpRequest对象的open和send方法。
eg: //GET请求方式
xhr.open('GET', 'checkUser.jsp?username='+name, true);
xhr.send(null)
//POST请求方式
xhr.open("post","checkUser.jsp“,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(name="+name+"&password=ppp");
注意:xhr.setRequestHeader()要放在open()和send()之间
。
4.
服务器
处理信息
eg: // jsp中处理
<%@ page language="java" contentType="text/html;
charset=UTF-8" pageEncoding="UTF-8"%>
<%
String username = request.getParameter("username");
if("admin".equals(username)){
out.print("用户名已存在");
}
else
{
out.print("用户名可以使用");
}
%>
// Servlet中处理
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException
{
// TODO Auto-generated method stub
String username =
request.getParameter("username");
response.setCharacterEncoding("UTF-8");
if("admin".equals(username)){
response.getWriter().print("用户名已存在");
}
else
{
response.getWriter().print("用户名可以使用");
}
}
相关推荐
《Ajax基础教程.chm》 Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的...
ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...
精通Ajax 基础 教程附带源代码及其案例
AJAX基础.pdf AJAX基础.pdf AJAX基础.pdf
ajax的基础知识 我看过还不错
Ajax 基础教程中文版.pdf
ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...
原书名:Foundations of Ajax 原出版社: Apress 作者: (美)Ryan Asleson,Nathaniel T.Schutta 译者: 金灵 等 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:7115144818 上架时间:2006-2-14 ...
本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和...
书名:Ajax基础教程 作者:(美)阿斯利森 舒塔
ajax基础教程(pdf)完整版本,希望对大家有所帮助
ajax基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程ajax基础教程ajax础教程ajax基础教程aja基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程
堪称经典由于比较大,压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...
PDF格式电子书 适合有一点点JS基础,刚开始接触AJAX的人
Ajax作为一门心得技术 ,这两年被广泛应用于网络应用中,并发挥着越来越重要的作用,本文就Ajax得基础知识做一个简单介绍
60M的Ajax基础教程,非常适合初学者。
第八章 AJAX基础 第八章 AJAX基础 第八章 AJAX基础 第八章 AJAX基础
ASP.NET AJAX基础示例.................................................................................................ASP.NET AJAX基础示例
堪称经典由于比较大,压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...
堪称经典由于比较大,压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...