Ajax技术讲解

Ajax技术
1.Ajax技术简介

1)Ajax 是一种网页开发技术， （Asynchronous Javascript + XML）异步 JavaScript 和 XML；
2)Ajax 是异步交互，局部刷新；
3)Ajax 能减少服务器压力；
4)Ajax 能提高用户体验；

Ajax 交互与传统交互比较
传统交互：网页整体刷新，服务器压力大，用户体验不好；
Ajax 交互：局部刷新，服务器压力小，用户体验好；

2.Ajax核心知识
主要有3部分内容：
第一节：XMLHttpRequest 对象创建
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject） 。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某
部分进行更新。

第二节：XMLHttpRequest 对象请求后台
知识点讲解：
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)
将请求发送到服务器。
string：仅用于 POST 请求

GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

setRequestHeader(header,value)
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML） 。
为 True 的话，表示的是异步，异步表示程序请求服务器的同时，程序可以继续执行；能提高系统的运行效率；
为 False 的话，表示同步，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会
挂起或停止。
我们一般都是用 True；

第三节：XMLHttpRequest 对象响应服务器
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange存储函数（或函数名） ，每当 readyState 属性改变时，就会调用该函数。

readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status
200: “OK”
404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。 （了解即可）

ps：在新建项目的时候会发生下面的错误。解决办法如下：
http://zhidao.baidu.com/link?url=5bTUalsxcc7Xw6JKNGsuYz8-DbExeDlJNW5H9dTBmZi17Mf4VtlUG1JqLBQq7FYc0bS-GhTclUe61zTP7QrCD6rZasDAeefEZaU8Wmzj6Vu
其中具体的详细内容如下

3.核心技术详细介绍

第一部分：XMLHttpRequest 对象创建
1.先在body中写用户需要提交的部分，然后通过点击按钮，调用函数function loadName().

<div style="text-align: center;">
    <div>

    <!-- //按钮点击的时候调用loadName -->
        <input type="button" onclick="loadName()" value="Ajax获取数据"/>&nbsp;&nbsp;
        <input type="text" id="name" name="name" />
    </div>
</div>

2.在function loadName()中进行XMLHttpRequest 对象创建

var xmlHttp;//1.XMLHttpRequest 对象创建
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();//所有现代浏览器均支持 XMLHttpRequest 对象
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE5 和 IE6 使用 ActiveXObject
        } 

第二部分：XMLHttpRequest 对象请求后台

 xmlHttp.open("get", "getAjaxName", true);
 //2.XMLHttpRequest 对象请求后台（get）   getAjaxName的和servlet中相应的Url去进行处理

第三部分：XMLHttpRequest 对象响应服务器
这里在java资源包下创建处理请求的class文件，class文件需要继承HttpServlet

public class GetAjaxNameServlet extends HttpServlet{

    /**
     * 添加了一个局部版本，不然会报错
     */
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out=response.getWriter();
        out.println("ajax返回的文本");
        out.flush();
        out.close();
    }


}

最后一步就是配置web.xml文件

 <servlet>
  <servlet-name>getAjaxNameTest</servlet-name>
  <servlet-class>com.hlf.test.GetAjaxNameServlet</servlet-class>
  </servlet>

  <servlet-mapping>
  <servlet-name>getAjaxNameTest</servlet-name>
  <url-pattern>/getAjaxName</url-pattern>
  </servlet-mapping>

上面的基本流程就是以get方式无参请求。

那么对于有参数的我们需要如何接收和处理呢？
传递参数

 xmlHttp.open("get", "getAjaxName?name=helen&age=18", true); 

接收参数

        String name=request.getParameter("name");
        String age=request.getParameter("age");
        System.out.println("name="+name);
        System.out.println("age="+age);

通过firebug可以看到使用get方式是将url直接添加到后面去的方式。

当然，这里也是可以使用post的方式传参。

        xmlHttp.open("post", "getAjaxName", true);
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send("name=jack&age=11");

这个时候在url中就不能看到追加的信息，因为POST将它们都封装起来了，但是在后台依然还是可以看到信息的。

关于返回结果的处理如下：
alert("readState状态："+xmlHttp.readyState+";status状态："+xmlHttp.status);
        xmlHttp.onreadystatechange=function(){
            alert("readState状态："+xmlHttp.readyState+";status状态："+xmlHttp.status);
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);//将之前ajax中的那段返回的文本得到
                document.getElementById("name").value=xmlHttp.responseText;
            }
        };

以上基本上就是一个完整的ajax的处理过程。