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;
}
},xml:xhr.responseXML
}
callback(p);
}
}
}
}; （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |