AJAX 请求数据
AJAX简介:
asynchronouse javascript and xml
1.为什么要用ajax??
异步操作,发送了一个异步的request,这时用户不用等待 ,可以进行后续的操作,能更大限度的提升用户体验度 特点: 返回一张页面的局部内容 异步刷新
2.简单使用步骤:
1.获取对象
Firefox
var xhr = new XMLHttpRequest();
IE
* var xhr = new ActiveXObject("Microsoft.XMLHTTP");
var xhr = new ActiveXObject("MSXML2.5.0.XMLHTTP");
var xhr = new ActiveXObject("MSXML2.4.0.XMLHTTP");
2.重要属性
xhr.readyState 数字类型的属性,浏览器为这个属性赋值
0 xhr初始化 (未连接)
1 xhr发送请求 (建立连接)
2 xhr|Servlet接受到请求 (协议头已接收)
3 Servlet提供response的时候 (正在接收协议体)
4 response到达html页面时候 (完成)
xhr.status 服务器返回的http协议号
200 正常返回的状态码
404
500
*** 事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//代码块
}
}
3.方法
xhr.open("POST|GET",url,(是否异步true)) 建立连接
xhr.send(); 传输数据
ajax使用:
1.获取对象
2.建立连接发送请求
3.获得服务器返回的结果
4.处理结果
开发过程:
1.服务器端程序
2.页面脚本
1)创建对象
2)设置监听函数
3)处理请求
3.获取相应的属性:
xhr.responseXML - DOM对象
获得服务器返回的xml数据
服务器必须设置: response.setContentType("text/xml")
xhr.responseText
$(span).innerHTML=xhr.responseText;
多次执行ajax请求,怎么解决浏览器缓存的问题?(IE问题比较严重)
1.改变请求路径
get方式:
xhr.open("get","show?r="+Math.random());
post方式:
xhr.send(path+"&r="+Math.random());
2.在服务器端程序中,要求浏览器不缓存数据
response.setHeader("cache-control","no-cache");
//清空浏览器缓存
response.setHeader("progma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
===================
封装ajaxUtil
var Ajax = {
createXHR:function(){
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
return xhr;
}else if(window.ActiveXObject){
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
return xhr;
}
},
sendRequest:function(method,url,data,callback){
var xhr = this.createXHR();
xhr.open(method,url);
if(method=="GET"){
xhr.send(null);
}else if(method=="POST"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var p = {
text:xhr.responseText,
xml:xhr.responseXML
}
callback(p);
}
}
}
};
---------------------------------------------------------------------------------------------------------
简单例子:
/**
* 用户名验证举例
* reg1.html 常规写法
* reg2.html 用到了封装好的ajaxUtil.js
*/
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckServlet extends HttpServlet {
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 清空浏览器缓存
response.setHeader("progma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
// 接收表单数据
String name = request.getParameter("name");
PrintWriter out = response.getWriter();
// 连接数据库处理
// biz--dao
if("jim".equals(name)){
out.println("username is registered");
}else{
out.println("username is ok ");
}
out.close();
}
}
Html代码:
reg1.html
<html>
<head>
<script type="text/javascript">
function $(tagId){
return document.getElementById(tagId);
}
function checkUserName(){
var name = $("nameId").value;
var xhr ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","/ajax/check?name="+name);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var ret = xhr.responseText;
var span = $("msgId");
span.innerHTML = "<font color='red'>"+ret+"</font>" ;
}
}
}
</script>
</head>
<body>
<h1>User Register</h1>
<table>
<tbody>
<tr>
<td>User Name</td>
<td><input type="text" id="nameId" name="name" onblur="checkUserName();"/>
<span id="msgId"></span>
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>confirm </td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>phone:</td>
<td><input type="text" maxlength="9"/></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="user register" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
reg2.html
<html>
<head>
<script type="text/javascript" src="ajaxUtils.js"></script>
<script type="text/javascript">
function $(tagId){
return document.getElementById(tagId);
}
function checkUserName(){
var name = $("nameId").value;
Ajax.sendRequest("POST","/ajax/check","name="+name,cb);
}
function cb(c){
var ret = c.text;
var span = $("msgId");
//innerHTML作用 方便往标签中增加内容
span.innerHTML = "<font color='red'>"+ret+"</font>" ;
}
</script>
</head>
<body>
<h1>User Register</h1>
<table>
<tbody>
<tr>
<td>User Name</td>
<td><input type="text" id="nameId" name="name" onblur="checkUserName();"/>
<span id="msgId"></span>
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>confirm </td>
<td><input type="password"/></td>
</tr>
<tr>
<td>email</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>phone:</td>
<td><input type="text" maxlength="9"/></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="user register" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Xml代码:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>CheckServlet</servlet-name>
<servlet-class>web.CheckServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckServlet</servlet-name>
<url-pattern>/check</url-pattern>
</servlet-mapping>
</web-app>
验证:
http://localhost:8080/ajax/reg2.html
附:Ajax简易封装工具类ajaxUtil.js
var Ajax = { createXHR:function(){
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
return xhr;
}else if(window.ActiveXObject){
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
return xhr;
}
},
sendRequest:function(method,url,data,callback){
var xhr = this.createXHR();
xhr.open(method,url);
if(method=="GET"){
xhr.send(null);
}else if(method=="POST"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var p = {
text:xhr.responseText,
xml:xhr.responseXML
}
callback(p);
}
}
}
};