Ajax简述

浏览数：39 / 时间：2015年06月09日

一、AJAX

AJAX 是一个比较莫名的缩写单词：Asynchronous JavaScript + XML

技术分享

AJAX包含以下五个部分：

基于标准的表示技术，使用XHTML与CSS
动态显示和交互技术，使用Document Object Model(文档对象模型)
数据互换和操作技术，使用XML与XSLT
异步数据获取技术，使用XMLHttpRequest
而JavaScript 将以上的一切都结合在一起

技术分享

二、创建XMLHttpRequest对象

技术分享

统一创建方法：

技术分享

//创建XMLHttpRequest对象
function createXmlHttpRequest(){

    if(window.XMLHttpRequest){//判断浏览器版本是不是IE7以上和其它浏览器
        return new XMLHttpRequest();
    }else if(window.ActiveXObject){//判断浏览器版本是不是IE5，IE6浏览器
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

工作原理

技术分享

三、XMLHttpRequest方法

技术分享

3.1、详细介绍

技术分享

四、XMLHttpRequest属性

技术分享

4.1、readyState属性

技术分享

4.2、status属性

技术分享

4.3、其它属性

技术分享

五、发送get响应

技术分享

六、Post方式

技术分享

七、简单例子

servlet

package servlet;

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

    private static final long serialVersionUID = 1L;

    
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String uname=request.getParameter("uname");
        boolean flag=false;
        if("accp".equalsIgnoreCase(uname)){
            flag=true;
            out.println(flag);
            System.out.println(flag+" "+uname);
        }else{
            out.println(flag);
            System.out.println(flag+" "+uname);
        }
        out.flush();
        out.close();
    }

    
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        doGet(request, response);
    }

}

页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户注册</title>
<script type="text/javascript">
//判断用户名
function checkuname(ouser){
    //取用户名的值
    var uname=ouser.value;
    //判断是否为空
    if(!uname){
        alert("用户名不能为空!");
        //ouser.focus();
        return false;
    }
/*     get方式
    //创建发送请求的url
    var url="LoginServlet?uname="+uname;
    //接收返回的XMLHttpRequest对象创建对象
    xmlHttpRequest=createXmlHttpRequest();
    //设置回调函数
    xmlHttpRequest.onreadystatechange=haoLeJiaoWo;
    //初始化xmlHttpRequest
    xmlHttpRequest.open("GET",url,true);
    //发送请求,因为是get方式，所以参数为null
    xmlHttpRequest.send(null);
*/
//post方式
//请求的url
var url="LoginServlet";
//创建xmlHttpRequest对象
xmlHttpRequest=createXmlHttpRequest();
//创建回调函数
xmlHttpRequest.onreadystatechange=haoLeJiaoWo;
//初始化
xmlHttpRequest.open("POST",url,true);
//设置请求头类型
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("uname="+uname);

}
//回调函数
function haoLeJiaoWo(){
    //表示数据接收完成，并正确返回
    if(xmlHttpRequest.readstate=4 && xmlHttpRequest.status==200){
        //接收服务器返回的值这里为文本
        var result=xmlHttpRequest.responseText;
        //去掉字符串前后的空格
        result=result.replace(/(^\s*)|(\s*$)/g,"");
        //判断值
        if(result=="true"){
            alert("用户已经存在");
            return false;
        }else{
            alert("用户可以使用");
            return true;
        }
    }
}

//创建XMLHttpRequest对象
function createXmlHttpRequest(){

    if(window.XMLHttpRequest){//判断浏览器版本是不是IE7以上和其它浏览器
        return new XMLHttpRequest();
    }else if(window.ActiveXObject){//判断浏览器版本是不是IE5，IE6浏览器
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

</script>
</head>

<body>
<form action="LoginServlet" method="get">
<table align="center">
<tr>
<td>
<p>用户账户:
<input  type="text" name="uname" onblur="checkuname(this);"/>
</p>
</td>
</tr>
<tr>
<td>
<p>用户密码:
<input  type="password" name="passwd"/>
</p>
</td>
</tr>
<tr>
<td>
<p>确认密码:
<input  type="password" name="repasswd"/>
</p>
</td>
</tr>
<tr>
<td>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>

八、处理XML

技术分享

九、XML简单例子

package servlet;

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

    private static final long serialVersionUID = 1L;

    public doGetU() {

    }

    public void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException {
        //设置响应为xml字符编码为UTF-8
        String uname=request.getParameter("uname");
        response.setContentType("text/xml;charset=utf-8");
        PrintWriter     out = response.getWriter();
        
        StringBuilder bd=new StringBuilder();
        bd.append("<userinfo>");
        bd.append("<username>");
        if(uname==null || uname.length()==0 ){
            bd.append("请选择用户");
        }else{
            bd.append(uname);
        }
        bd.append("</username>");
        bd.append("</userinfo>");
            out.println(bd.toString());
            out.flush();
            out.close();

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException  {
        doGet(request, response);

    }

}

页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax中xml处理</title>
<script type="text/javascript">
function checkUser(ouser){
    
    //获取下拉框的值
    var uname=ouser.value;
    //提交的URL get方式
    var url="doGetU?uname="+uname;
    //创建xmlHttpRequest对象
    xmlHttpRequest=createXmlHttpRequest();
    //设置回调函数
    xmlHttpRequest.onreadystatechange=haoLeJiaoWo;
    //初始化
    xmlHttpRequest.open("GET",url,true);
    //post方式
    //xmlHttpRequest.open("post",url,true);
    //xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //发送数据get方式，可以没有参数
    xmlHttpRequest.send();
    //post发送参数
    //xmlHttpRequest.send("uname="+uname)
    
}
function haoLeJiaoWo(){
    //接收完成，正确返回
        
    if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
        var xml=xmlHttpRequest.responseXML;
        //判断是否为空
        if(xml){
            //获取useranem的子节点数组
            var userNodes=xml.getElementsByTagName("username");
            if(userNodes.length>0){
            var uname=userNodes[0].firstChild.nodeValue;
            document.getElementById("username").value=uname;
        }
        }
    }
    
}

function createXmlHttpRequest(){
    if(window.XMLHttpRequest){//判断浏览器版本IE7.0以上，或者其它的浏览器
        return new XMLHttpRequest();

    }else{//IE5.0，6.0
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}
</script>
</head>
<body>
    <form action="doGetU" method="get">
        <table>
            <tr>
                <td>请选择用户:</td>
                <td style="width:150px"><select name="user"
                    onchange="checkUser(this);">
                
                        <option value="accp">accp</option>
                        <option value="test">test</option>
                </select></td>
            </tr>
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="username" style="width: 150px" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>