ajax-初次认识

ajax简介

AJAX即“**A**_synchronous **J**_avascript **A**nd _**X**_ML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。

优势

A、通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
B、ajax主要用于前台和后台的数据交互，他们之间通过转换成相同的格式xml来读取其中的数据。

使用ajax

 var xmlhttp;
    function  createXmlRequest() {
        try{
               xmlhttp = new XMLHttpRequest();  //创建XMLHTTP对象
        }catch(e){
            try{
               xmlhttp =  new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP         
            }catch (e) {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP
            }
        }
        return xmlhttp;
    }
    //get 提交方式
    function sendGetReq(url,callBackFn) {
        xmlhttp.onreadystatechange=function(){ //无名函数
             alert(xmlhttp.readyState); // 根据状态进行不同的操作
         if(xmlhttp.readyState==4 && xmlhttp.status==200){
               alert(xmlhttp.responseText); //responseText 获取响应数据
          }
     };
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
    }

//post 提交方式
function sendPostReq(url,param,callBackFn) {
    xmlhttp.onreadystatechange= function () {
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            callBackFn(xmlhttp.responseText);//回调函数处理获取到的数据
        }
    };
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  // 传值必须加这句话
    xmlhttp.send(param);
}

解释：
首先需要获取到XMLHTTP对象，针对不同的版本在方法createXmlRequest()中做了处理。
from表单中有get和post两种提交方式，ajax也同样。
sendGetReq(url,callBackFn) url是访问的路径，一般是servlet中的。callBackFn是一个回调函数，下面会讲到。
在sendGetReq方法中，获取到XMLHTTP对象，
XMLHTTP.open()为发送请求，三个参数依次为：提交方式（post还是get，必须大写），请求路径，是否异步提交（true（异步）或 false（同步））。
xmlhttp.send(param);表示要发送的数据，一般在post方式中发送数据。在post中发送数据前，还要对http协议进行设置xmlhttp.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);该语句在open（）和send（）的中间，放在其他位置会报错。
通过xmlhttp.onreadystatechange获取到服务器响应的状态
w3cschool中的介绍：

onreadystatechange 事件

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

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

| status |
200: “OK”
404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

---

获取servlet传回来的数据
servlet中将数据写在流中，前台也同样以流接收。
通过xmlhttp.responseText获取到数据
获取到的数据一般是text类型，如果是其他类型是，如数组，对象等，需要用到js的eval（）转化。
servlet的代码：

protected void doAjax(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
         resp.setCharacterEncoding("utf-8");

              System.out.println("进入doAjax中");

              resp.setContentType("text/html");
              PrintWriter out =  resp.getWriter();
              out.write("<div>进入ajax</div>");
              out.flush();
/              out.close();

}

resp.setContentType(“text/html”);对http协议进行设置
PrintWriter out = resp.getWriter();获取流，将数据写入流中。
jsp前台的代码：
js

<script type="text/javascript">
  function checkname(obj){
   var val = obj.value;
   var url ="AjaxServlet.do";
   alert("点击"+url);
    createXmlRequest(); //获取ajax对象

    sendGetReq(url);
   }
 </script>
     //html中
      <label>账户</label><input type="text"  value="" id=""  name = "uname" onblur="checkname(this)"></br>

可以将ajax的那一段代码封装后再引用

     <script type="text/javascript" src="js/ajax.js"></script>

关于回调函数：
一般是对获取到的数据进行处理，可以事先写好对数据处理的函数，在调用的时候传入该函数就好了。