北京传智播客
一 、AJAX的技术核心
1. XMLHttpRequest对象
2. DOM与HTML
3. DOM与XML
4. 面向对象的Javascript
二 、创建XMLHttpRequest对象
不同版本的浏览器创建XMLHttpRequest对象的方式不同,所以必须针对不同的浏览器创建不同的XMLHttpRequest对象 , 主要可分两类:
创建XMLHttpRequest对象之前应先使用if…else..语句判断是哪种浏览器
1 . IE7.0以下版本是以ActiveX组件方式创建XMLHttpRequest对象 , 创建方法如下 :
如: var xmlhttp;
xmlhttp=new ActiveXObject();
2 . 其它浏览器可直接创建Javascript的XMLHttpRequest对象
如: var xmlhttp;
xmlhttp=new XMLHttpRequest();
完整代码如下:
//针对不同的浏览器建立XMLHttpRequest对像
if(window.XMLHttpRequest){
//针对非IE7.0以下的多款浏览器
xmlhttp=new XMLHttpRequest();
//此if语句主要针对部分版本的Mozillar浏览器的xml bug
if(xmlhttp.overrideMimetype){
xmlHttp.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){
//针对IE6.0及以下的IE浏览器
var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
//for语句检测与MSXML列表对应的系统MSXML版本
for(var n = 0; n < MSXML.length; n ++){
try{//如果找到则创建该对象
xmlhttp = new ActiveXObject(MSXML[n]);
break;
}catch(e){}
}
}
三、关于document.getElementById
document.getElementById的作用是根据id名获得对应的节点(某一个html标签的内容),我们这里分别用这个语句来获得div和文本框的节点;.value的作用是获得文本框的value属性值,也就是文本框中的内容
四 一个完整的建立AJAX的步骤
1. 建立XMLHttpRequest对象
2. 设置回调函数
---注意: 回调函数后不能有括号 , 否则就变成得到回调函数的返回值
3. 使用open方法与服务器建立连接
其中open方法的三个参数必填
--- 注意: POST 和 GET方法在编写open和send方法时会有所不同。
使用POST方法时,须设置setRequestHeader(String header,String value)方法,且send()内的参数不为空
使用GET方法,将参数直接写在OPEN方法中…send(null)
4. 使用send 方法向服务器发送数据
5. 编写回调函数 ,针对不同响应状态进行处理
判断响应状态码readystate 及 服务器返回状态码status
使用格式 : xmlhttp.readystate
响应状态码readystate及其含义:
0:表示未初始化
1:表示open方法成功调用以后
2::表示服务器已经应答客户端的请求
3:表示交互中。Http头信息已经接收,响应数据尚未接收。
4:表示数据接收完成。
服务器返回状态码status: 使用格式 : xmlhttp.status
200表示“成功”,404表示“未找到” 其它具体代码含义见”张老师JAVAWEB开发内幕”P122页
五、重要的方法和属性
1 . 方法 : open(String method,String url,boolean asynch,String username,String password)
建立与服务器的连接,其中method表示HTTP调用方法。一般使用“GET”,“POST”。url表示调用的服务器的地址,asynch表示是否采用异步方式,如果为true则表示异步。username和password分别表示提供http认证机制需要的用户名和密码,这两个参数可以不指定。
2 . 方法 : send(content)
向服务器发出请求,如果采用异步方式,该方法会立即返回。Content可以不指定,其内容可以是DOM对象,输入流或是字符串。
3 . 方法 : setRequestHeader(String header,String value)
此方法需在open方法以后调用,且使用POST方式时必须设置 。
4 . 属性 : onreadystatechange
请求状态改变的事件触发器(readyState变化时会调用此方法)。通常是一个javascript函数
如 : xmlhttp.onreadystatechange=callback; callback即为一个用function定义的函数。
5 . 属性 : readyState status 见第四条第五点
6 . 属性 : responseText 服务器返回的文本内容
responseXML 服务器返回的兼容DOM的XML内容
statusText 服务器返回状态码的文本信息
六、需要注意的内容
1 . 不同浏览器下XMLHttpRequest对象的不同的建立方式
2 . 设置回调函数时不要加括号
3 . OPEN方法三个参数的含义,此外还需要注意GET 和POST方式服务器端地址的不同写法
4 . GET方式和POST方式SEND的参数的不同之处,以及使用POST方式时,SEND之前需要设置请求头信息的工作
5 . 如何判断正确的响应数据已经返回 , 此外还要注意如何获取响应数据内容
七、AJAX应用的简单实例
该实例是AJAX的一个简单应用,用来判断用户名是否存在。
1、HTML页面
用AJAX做的HTML页面:把很多代码都写到了HTML客户端
<html>
<head>
<title></title>
</head>
<body>
校验用户名是否存在的例子<br/>
用户名:<input type="text" id="name"/>
<input type="button" value="检验" onclick="submit()"/><br/>
<div id="result"></div>
<script type="text/javascript">
var xmlhttp;
var resultNode;
function submit(){
//把DIV标签对中的内容取出来
resultNode = document.getElementById("result");
/* 初始化XMLHttpRequset对象
* 因为IE5,IE6和其他浏览器不一样,它的内部没有XMLHttpRequset对象,所以我
* 们要判断浏览器的类型,然后用不同的方法去初始化。
*/
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
//有些浏览器中有BUG,这段就是防止BUG,不需要记住,知道就好
if(xmlhttp.overrideMimetype){
xmlHttp.overrideMimeType("text/xml");
}
//针对不同的浏览器判断,然后以数组的形式来初始化
} else if (window.ActiveXObject) {
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){}
}
}
if(xmlhttp == null){
resultNode.innerHTML = "不能建立XMLHttpRequest对象";
}
//取出name中的值,然后在浏览器端判断
var name = document.getElementById("name").value;
if(name == null || name == ""){
resultNode.innerHTML = "用户名不能为空";
return false;
}
//GET方式发出请求
xmlhttp.onreadystatechange=callback;
xmlhttp.open("GET"," ClassicServer ?name=" +
encodeURI(encodeURI(name)),true);
xmlhttp.send(null);
//POST方式发出请求,POST方式一定要加上setRequestHeader
xmlhttp.open("POST"," ClassicServer ",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("name=" + encodeURI(encodeURI(name)));
}
//处理服务器返回的数据
function callback(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
resultNode.innerHTML = xmlhttp.responseText;
} else{
resultNode.innerHTML = "服务器故障";
}
}
}
</script>
</body>
</html>
2、servlet的代码
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class ClassicServer extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try{
response.setContentType("text/html;charset=GB2312");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
if(old == null || old.length() == 0){
out.println("用户名不能为空");
} else{
String name = new String(old.getBytes("ISO8859-1"));
if(name.equals("wangxingkui")){
out.println("用户名[" + name + "]已经存在,请使用其他用户名");
} else{
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册");
}
}
out.println("<br/><a href=\"index.html\">返回校验页面</a>");
} catch(Exception e){
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
http://www.itcast.cn
分享到:
相关推荐
AJAX培训 - 第一讲:AJAX基础
第 10 部分: 使用 JSON 进行数据传输 第 11 部分:将 Ajax 带入 Eclipse 的 Ajax Toolkit Framework 的两个工具 第 12 部分:面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 第 13 部分:面向 Java 开发...
您将探索如何使用Ajax来增强站点并使其具有Web 2.0的感觉,以及其他JavaScript增强如何将Web浏览器和网站变成真正的应用程序。
软通培训资料,讲述ajax原理 1、web、ajax概述 2、ajax入门 3、ajax操作xml dom 4、DWR 5、JQuery
ZK框架 : Ajax开发实战1.rar
This is a simple demo of some of the AJAX helpers now available in CAKE. These helpers are directly modeled on Ruby On Rails. In fact, they were shamelessly ported from rails almost verbatim. You can ...
网络评论:这书真的是我感觉特烂的一本书了,目录看上去不错,讲的挺多,但是到每一部分时,烂到都没法看了,完全没有逻辑,直接就来一段莫名的代码,也不解释什么意思,总之一句话非常差,慎买! 《搞定j2ee核心...
这是达内培训的AJAX第一天代码。AJAX技术是基于javascript技术的。是客户端动态效果的很好应用。
第3章:基于AJAX的电子邮件处理.pdf第3章:基于AJAX的电子邮件处理.pdf第3章:基于AJAX的电子邮件处理.pdf第3章:基于AJAX的电子邮件处理.pdf第3章:基于AJAX的电子邮件处理.pdf第3章:基于AJAX的电子邮件处理.pdf第...
ASP.NET Ajax开发PDF 第2章:Ajax Control Toolkit中的文本输入处理 第3章:基于Ajax的电子邮件处理
ZK框架:Ajax开发实战.pdf ZK框架:Ajax开发实战.pdf
第2章:AJAX Control Toolkit中的文本输入处理.pdf第2章:AJAX Control Toolkit中的文本输入处理.pdf第2章:AJAX Control Toolkit中的文本输入处理.pdf第2章:AJAX Control Toolkit中的文本输入处理.pdf第2章:AJAX ...
Ajax基础:四天学会Ajax chm 本教程的作者是一位 Ajax 编程专家,他通过这本书向大家演示了HTML、JavaScript™ 技术、DHTML 和 DOM 这些技术是如何协同工作的—— 从总体概述到细节的讨论 —— 使高效的 Web 开发...
Ajax控件:UPdatepanel使用
第 2部分: 使用JavaScript和Ajax发出异步请求 10 第 3 部分: Ajax 中的高级请求和响应 26 第 4 部分: 利用 DOM 进行 Web 响应 40 第 5 部分: 操纵 DOM 51 第 6 部分: 建立基于 DOM 的 Web 应用程序 65 第 7 部分: 在...
非常实用的Ajax基础培训课件,知名企业内部的培训教程
本卷从最易于理解和使用的那部分入手,介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分,包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...
Ajax in action也就是ajax实战。比较经典的ajax书籍。
Ajax基础培训_ppt,保证看完之后,你会对Ajax有了新的认识。
Ajax控件:UpdateproGress