Ajax简述

2019-11-14 23:25:23

字体：大中小

来源：转载

供稿：网友

Ajax简述一、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方式//请求的urlvar 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>

上一篇：java基础笔记（一）

下一篇：Java中字符串的学习（一）String类的概述及常见方法使用