php 阿贾克斯页面回调输出,AJAX（阿贾克斯）的简单应用

1.ajax 对象的属性说明(常用的)

(1)open(method,url,boolean);创建请求，method :填请求类型(get post),url :请求的地址，

boolean：true代表同步(即ajax操作过程中仍然可以操作html)

(2)send("name="+name); 发送请求，通过属性名“name” 获取属性的值：name;

(3)setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8"); 设置post请求的http 消息头

(4)onreadystatechange(); 发生任何状态变化时 事件控制对象， 通常绑定回调函数

(5) readyState : 请求的状态

0: 尚未初始化 创建open时

1：正在发送  send

2：请求完成

3.请求成功    正在响应

4：数据接收成功 响应完毕

(6) status 服务器返回的响应值

200：请求成功

202：请求被接收，但是没完成处理

400：错误请求

404：资源找不到

500：内部服务器错误

(7) responseText 服务器返回的文本

(8) responseXML 返回的xml，可以当作DOM处理

(9) abort()；取消请求

(10) getAllResponseHeader(); 获取响应的所有HTTP头对象

(11) getResponseHeader("指定"); 获取指定的HTTP头对象

注：为解决 get请求缺省值中文乱码问题，在TOMcat conf 下的 server 的xml文件中的如下位置 添加URLEncoding="utf-8";

2. 获取ajax 对象

将获取ajax 对象的方法封装在 js文件中，方便调用。同时可以在js文件自定义函数方法

//创建 ajax.js 文件

functiongetxhr(){varxhr;if(window.XMLHttpRequest){ // 获取ajax 对象，使用if-else语句是为了避免浏览器不兼容现象

xhr=newwindow.XMLHttpRequest();

}else{

xhr=new ActionXObject('Microsoft.XMLHttp');

}returnxhr;

}function $(id){ //自定义获取id对象的函数

returndocument.getElementById(id);

}function $V(id){ //自定义获取id对象文本值 的函数

return$(id).value;

}

3.使用ajax 将页面数据提交到服务器Servlet

练习阿贾克斯

functiongetUsername(){//使用ajax 检测用户名长度是否规范

varxhr=getxhr();varstr;

xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){varstr=xhr.responseText;

$("usernamespan").innerHTML=str;

}

}varusername=$V("username");

xhr.open("get","getUsername.do?username="+username,true);

xhr.send(null);

}functionpostPassword(){//使用ajax 检测两次密码是否相同

varxhr=getxhr();

xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){varstr=xhr.responseText;

$("password2span").innerHTML=str;

}

}

xhr.open("post","postPassword.do",true);

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");varpassword1=$("password1").value;varpassword2=$("password2").value;

xhr.send("password1="+password1+"&password2="+password2);

}

注册

账号：
密码：
确认密码：

4. 服务器Servlet将页面提交的数据进行处理

package Ajax;

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 Action extends HttpServlet {

private static final long serialVersionUID = 1L;

public Action() {

super();

// TODO Auto-generated constructor stub

}

protected void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

PrintWriter pw=response.getWriter();

String path=request.getRequestURI(); // 获取URI

// 获取 地址的关键字段来匹配相应的方法

String action=path.substring(path.lastIndexOf("/")+1,path.lastIndexOf("."));

if("getUsername".equals(action)) { // 对用户名进行判断

String username=request.getParameter("username");

System.out.println(username);

if(username.length()<4||username.length()>8) {// 判断条件，响应页面

pw.println("用户名长度不合适");

}else {

pw.println("用户名长度太他妈的合适聊，给你点个赞！！！");

}

}

if("postPassword".equals(action)) {// 对密码进行判断

String password2=request.getParameter("password2");

String password1=request.getParameter("password1");

System.out.println(password1);

System.out.println(password2);

if(password1.equals(password2)) {

pw.println("两次的密码相同！！！！！！！！！！！");

}else {

pw.println("密码不同");

}

}

}

}

end;