[url=http:www.itcast.cn//url]北京传智播客[/url]
一 、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();
完整代码如下：
[code]//针对不同的浏览器建立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){}
}
}
[/code]
三、关于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客户端
[code]<html>
<head>
<title></title>
</head>
<body>
校验用户名是否存在的例子<br/>
用户名：<input type="text" id="name"/>
<input type="button" value="检验" οnclick="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>
[/code]
2、servlet的代码
[code]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);
}
}
[/code]
[url]http://www.itcast.cn[/url]
一 、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();
完整代码如下：
[code]//针对不同的浏览器建立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){}
}
}
[/code]
三、关于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客户端
[code]<html>
<head>
<title></title>
</head>
<body>
校验用户名是否存在的例子<br/>
用户名：<input type="text" id="name"/>
<input type="button" value="检验" οnclick="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>
[/code]
2、servlet的代码
[code]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);
}
}
[/code]
[url]http://www.itcast.cn[/url]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
