对Ajax的一些基本理解

136 阅读 0 评论 90 点赞

我是靠谱客的博主友好果汁，最近开发中收集的这篇文章主要介绍对Ajax的一些基本理解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、ajax的入门
1、XMLHttpRequest对象的使用（使用XMLHttpRequest解析xml文件）

 onreadystatechange
指定当readyState属性改变时的事件处理句柄
 open()
创建一个新的http请求，并指定此请求的方法、URL等信息
 send()
发送请求到http服务器并接收回应
 readyState
返回XMLHTTP请求的当前状态
 status
返回当前请求的http状态码
 responseText
将响应信息作为字符串返回
 responseXML
将响应信息格式化为Xml Document对象并返回

out回应客户
１、“添加新项” 新建一个XML文件来存放要被调用的数据。
XMLFile.xml
<?xml version="1.0" encoding="utf-8" ?>
<response>
    <res>
       对不起,登录失败!
    </res>
</response>

２、“添加新项” 新建一个JSP页，添加代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ajax异步调用</title>
</head>
<body>
<div style="background-color:Yellow" id="mytext">Ajax异步调用

</div>
<input type="button" value="更新" οnclick="startHTTP()" />
</body>
</html>

var XMLHttpReq;
function createHTTP(){
   //根据不同的浏览器创建XMLHttpRequest
   if(window.ActiveXObject)//ie浏览器
     {
        XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
     }
   else if(window.XMLHttpRequest){//其他浏览器
        XMLHttpReq=new XMLHttpRequest();
   }
}

//开始调用
function startHTTP()
{
    //创建对象
    createHTTP();
//状态发生变化就去执行一个方法
XMLHttpReq.onreadystatechange=StateDO;
    //获取XML文件数据
    XMLHttpReq.open("GET","/servelt/Ajaxservlet?name=wms",true);
    //发送消息
    XMLHttpReq.send(null);
}
//处理函数
function StateDO()
{
//判断是否完成状态,注意s大写
if(XMLHttpReq.readyState==4)//4表示异步处理完成
{
       //判断是否执行成功
       if(XMLHttpReq.status==200)//表示成功
       {
         //更新页面
         document.getElementById

("mytext").innerHTML=XMLHttpReq.responseText;

//XMLHttpReq.responseXML.getElementsByTagName("tr")

[0].firstChild.text;
}
}
}
</script>

3、ajax前台的3个处理函数（结合后台数据访问，使用ajax技术）
1、servlet回应客户端代码(通常返回XML文档)

     String uname = request.getParameter("uname");
  String psw = request.getParameter("psw");

  response.setContentType("text/xml; charset=UTF-8");
  PrintWriter out = response.getWriter();
  out.println("<?xml version=/"1.0/" encoding=/"utf-8/"

?>");
     //依据验证结果输出不同的数据信息
        out.println("<response>");
  if(uname.equals("wms") && psw.equals("123")){
   out.println("<res>" + uname+"欢迎登录！" +

"</res>");
}else{
out.println("<res>" + "对不起,登录失败！" +

"</res>");
}
out.println("</response>");
out.close();

2、客户端解析XMl文档
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信

息
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0]
.firstChild.data;
           window.alert(res);
            } else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
3、javascript解析XMl文档
getElementsByTagName("res")[0].text;
查询帮助文档，查询XMLDOMText Object

二、ajax的应用
联动菜单
页面：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>ajax异步处理</title>
    <script type="text/javascript">
     //创建对象
     var XMLHttpReq;
     function createXMLHTTP(){
       //ie浏览器
       if(window.ActiveXObject){
          XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
       }
       else if(window.XMLHttpRequest){
          XMLHttpReq=new XMLHttpRequest();
       }
     }
     //请求函数
     function startHTTP(url){
       createXMLHTTP();
       XMLHttpReq.onreadystatechange=StateDO;
       XMLHttpReq.open("get",url,true);
       XMLHttpReq.send();
     }
     //处理函数

   function StateDO(){
       if(XMLHttpReq.readyState==4){
           if(XMLHttpReq.status==200){
           //解析XML
           var res=XMLHttpReq.responseText;
           document.getElementById("jd").innerHTML=res;
           }
       }
     }

    // 身份验证函数
    function userCheck() {
  var qx = document.myform.qx.value;
  startHTTP('servlet/Ajax?qx='+ qx);
}
</script>
</head>

<body>

servlet类
public class Ajax extends HttpServlet {

public void doGet(HttpServletRequest request,

HttpServletResponse response)
throws ServletException, IOException {

    String qx=request.getParameter("qx");
    System.out.println(qx);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
    out.println("<select name='jd'>");
if(qx.equals("1")){
   out.println("<option value='11'>红旗路</option>");
   out.println("<option value='12'>山东路</option>");
   out.println("<option value='13'>中山路</option>");
}
if(qx.equals("2")){
    out.println("<option value='21'>唐城路</option>");
    out.println("<option value='22'>人民路</option>");
    out.println("<option value='23'>解放路</option>");
   }
    out.println("</select>");
out.flush();
out.close();
   }
}

三、DWR框架的使用

1、DWR框架概述
下载dwr.jar
其下载地址是http://getahead.org/dwr/，目前的最新版本是2.0.5，我们可以

只下载dwr-2.0.3-src.zip，因为它里面已经包含了dwr.jar和demo两个部分。

DWR -- Drect Web Remoting
 开源，免费的Ajax框架
 将Java类发布为JavaScript可调用的脚本对象
 提供JavaScript工具类，简化页面编码

2、为什么要使用DWR

DWR其功能的强大在于它可以用一种前所未有的便利方式将前端页面中的js与后

端服务器中的java程序进行直接的转换。比如，它可以将java程序中的某个类在

js中生成一个相应的对象，并可以调用发布的方法。

3、在项目中应用DWR
1)准备工作
 下载dwr.jar, 添加到项目中（ http://getahead.org/dwr ）
 创建配置文件：/WEB-INF/dwr.xml
 在web.xml中配置
<servlet>
<servlet-name>dwr-invoker</servlet-name>
  <servlet-class>
org.directwebremoting.servlet.DwrServlet
  </servlet-class>
  <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

2)发布Java类，配置dwr.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
    
    <create creator="new" javascript="User">
      <param name="class" value="biz.UserService"/>
      
      <include method="check"/>
    </create>
</allow>
</dwr>

**注意：
 exclude和include
1、exclude可以禁止页面调用后台的某个或某些方法，
具体的写法是在create中加入：<exclude method="createDepartment"/>
method部分写的是这些方法名，如果有多个就写多行exclude；
2、include则规定页面只能调用某些方法
 查看动态js文件
输入如下网址，http://127.0.0.1:8085/testdwr/dwr/
解析DWR工作原理
3）对应的业务类UserService.java
public class UserService {

  /**
   * 检查用户是否存在
   */
  public String check(String uname,String pwd) {
   if(uname.equals("aa") && pwd.equals("123")){
    return(uname+"欢迎登录！");
   }else{
    return("对不起,登录失败！");
   }
  }
}

4)页面代码

<script type='text/javascript'

src='/tea_ajax33/dwr/interface/User.js'></script>

src='/tea_ajax33/dwr/engine.js'></script>
<script type='text/javascript' src='/tea_ajax33/dwr/util.js'></script>
<script type="text/javascript">

//身份验证函数
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
  window.alert("用户名不能为空。");
  document.myform.uname.focus();
  return false;
}
else {
  User.check(uname,psw,callBackLogin);
  }
}
//data就是函数的返回值
function callBackLogin(data)
{
alert(data);
}
</script>

dwr生成的js文件
if (dwr == null) var dwr = {};
if (dwr.engine == null) dwr.engine = {};
if (DWREngine == null) var DWREngine = dwr.engine;

if (User == null) var User = {};
User._path = '/stu_dwr_27_3/dwr';
User.check = function(p0, callback) {
dwr.engine._execute(User._path, 'User', 'check', p0, callback);
}

四、post方法提交与编码转换

Ajax的post提交：
var queryString;
//请求函数
function startHTTP(url){
       createXMLHTTP();
       XMLHttpReq.onreadystatechange=StateDO;
       XMLHttpReq.open("post",url,true);
       XMLHttpReq.setRequestHeader("Content-type", "application/x-www

-form-urlencoded");
       XMLHttpReq.send(queryString);
     }

// 身份验证函数
    function userCheck() {
  var uname = document.myform.uname.value;
  var psw = document.myform.psw.value;
  queryString='uname='+uname+'&pwd='+ psw;
  startHTTP('servlet/AjaxServlet?');
}

编码转换
页面一律用UTF-8编码
1)Ajax提交数据的编码转换
get方法提交（Ajax的get方法，默认编码是gb2312,不正常显示，直接转码无

效）
AJax使用get方法提交中文乱码问题：
1）在页面上，请求前，编成utf-8码url=encodeURI(url); url=encodeURI

(url);
2) 在 servlet 中，解码
String name= java.net.URLDecoder.decode(uname, "UTF-8");

//请求函数
function startHTTP(url){
       createXMLHTTP();
        url=encodeURI(url);
        url=encodeURI(url); //两次，很关键
       XMLHttpReq.onreadystatechange=StateDO;
       XMLHttpReq.open("get",url,true);
       XMLHttpReq.send();
     }

String name= java.net.URLDecoder.decode(uname, "UTF-8");
System.out.println("姓名"+name);

post方法提交（Ajax的post方法，默认编码是utf-8,正常显示）