原始ajax学习

传统的web开发技术和Ajax技术有什么区别？
1、发送请求方式不同：
    传统Web应用通过浏览器发送请求，而Ajax技术则是通过JavaScript的XMLHttpRequest对象发送请求。
2、服务器响应方式不同：
    针对传统Web应用，服务器的响应是一个完整的页面，而采用Ajax技术后，服务器的响应只是需要的数据。
3、客户端处理的响应方式不同
    传统的Web应用发送请求后，浏览器将等待服务器响应完成后重新加载整个页面。而采用Ajax技术后，浏览器不再专门等待
请求的响应，而只是通过JavaScript动态更新页面中需要更新的部分。
    Ajax(Asynchronous JavaScript and XML)并不是一种全新的技术，而是由JavaScript、XML、CSS等几种现有技术整合而成。
    Ajax的执行流程由用户界面触发事件调用JavaScript，通过Ajax引擎——XMLHttpRequest对象异步发送请求到服务器，服务器返回XML、JSON或者HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面。
    XMLHttpRequest对象可以在不刷新当前页面的情况下向服务器发送异步请求，并接收服务器的响应结果，从而实现
局部更新当前页面的功能。尽管名为XMLHttpRequest，但它并不限于和XML文档一起使用，它还可以接收JSON或者HTML等
格式的文档数据。

创建XMLHttpRequest对象:
语法如下：
老版本IE(IE5和IE6)
XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
新版本IE和其他大部分浏览器（推荐使用）
XMLHttpRequest = new XMLHttpRequest();

XMLHttpRequest对象的常用属性和方法：
open(String method,String url,boolean async,String user,String password)
用于创建一个新的HTTP请求
参数method:设置HTTP请求的方法，如POST、GET等，对大小写敏感
参数url:请求的URL地址
参数async：可选，指定此请求是否为异步方法，默认为true
参数user:可选，如果服务器需要验证，此处需要指定用户名，否则，会弹出验证窗口
参数password:可选，验证信息中的密码，如果用户名为空，此值将被忽略

send(String data)
发送请求道服务器端
参数data:字符串类型，表示通过此请求发送的数据。此参数值取决于open方法中的method参数。如果method值为post,可以指定
该参数，如果method值为get，该参数为null;

abort() 取消当前请求

setRequestHeader(String header, String value) 
单独设置请求的某个HTTP头信息
参数header:要指定的http头名称
参数value:要指定的http头名称所对应的值

getResponseHeader(String header) 
从响应中获取指定的HTTP头信息
参数header：要获取的指定HTTP头

getAllReponseHeaders() 获取响应的所有HTTP头信息

onreadystatechange   设置回调函数
readyState  返回请求的当前状态：
常用值：0-未初始化 1-开始发送请求 2-请求发送完成 3-开始读取响应 4-读取响应结束

status 返回当前请求的HTTP状态码
常用值：200-正确返回  404-找不到访问对象

statusText 返回当前请求的响应状态

responseText  以文本形式获取响应值

responseXML 以XML形式获取响应值，并且解析成DOM对象返回

实现Ajax的过程分为发送请求和处理响应俩个步骤，发送请求有两种方式，即GET方式和POST方式；处理响应也有两种方式
，即处理文本响应和处理XML响应。

使用XMLHttpRequest对象发送GET请求到服务器端，并处理文本方式响应，具体步骤如下：
（1）创建XMLHttpRequest对象。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式。
（2）设置回掉函数。通过onreadystatechange属性设置回调函数，其中回调函数需要自定义。
（3）初始化XMLHttpRequest对象，通过open（）方法设置请求的发送方式和路径。
（4）发送请求。

具体代码如下：
//1、创建XMLHttPRequest对象
if(window.XMLHttpRequest){
    //返回值为true说明是新版本IE或者其他浏览器
    xmlHtttpRequest = new XMLHttpRequest();
}else{
    //返回值为false说明是老版本的浏览器
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
//3.初始化XMLHttpRequest组件
var url = "userServlet?name="+name;//服务器端URL地址，name为从“用户名”文本框获取的值
xmlHttpRequest.open("GET",url,true);
//4.发送请求
xmlHttpRequest.send(null);
//在回调函数callBack()中处理服务器响应的关键代码
function callBack(){
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        var data = xmlHttpRequest.responseText;
        if(data == "true"){
            $("#nameDiv").html("用户名已被使用！")
        }else{
            $("#nameDiv").html("用户名可以使用！")
        }
    }
}
执行检查功能的Servlet代码如下
public class UserServlet extends HttpServlet{
    public void doGet (HttpServletRequest request,HttpServletResponse response)throws ServletExcepton,IOExcption{
        String name = request.getParameter("name");
        boolean used = false;
        if("ajax".equals(name)){
            used = true;
        }else{
            used = false;
        }
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(used);
        out.flush();
        out.close();
    }
    public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
        request.setCharacterEncoding("UTF-8");
        this.doGet(request,response);
    }
}
发送AjaxPOST请求并处理响应，基本与get相似，关键代码如下：
//1、创建XMLHttPRequest对象
if(window.XMLHttpRequest){
    //返回值为true说明是新版本IE或者其他浏览器
    xmlHtttpRequest = new XMLHttpRequest();
}else{
    //返回值为false说明是老版本的浏览器
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
//3.初始化XMLHttpRequest组件
var url = "userServlet";//服务器端URL地址，name为从“用户名”文本框获取的值
xmlHttpRequest.open("POST",url,true);
xmlHeepRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
var data = "name="+name;
xmlHttpRequest.send(data);
//在回调函数callBack中处理服务器响应的关键代码
function callBack(){
    if(xmlHttpRequestState.readyState == 4 && xmlHttpRequest.status == 200){
        var data = xmlHttpRequest.responseText;
        //省略将服务器返回的文本数据显示到页面的代码
    }
}

对比使用GET与POST方式实现Ajax的区别
初始化XMLHttpRequest对象：
GET：指定XMLHttpRequest对象的open()方法中的method参数为GET
POST:(1)指定XMLHttpRequest对象的open()方法中的method参数为“POST”
    (2)指定XMLHttpRequest对象要请求的HTTP头信息，该HTTP请求头信息为固定写法。
发送请求：
GET:指定XMLHttpRequest对象的send()方法中的data参数为“null”
POST:可以指定XMLHttpRequest对象的send()方法中的data参数的值，即该请求参数需要携带的具体数据，多个键值对使用&连接