Ajax原理以及实现（js实现以及jquery实现）

1.Ajax简介

Ajax：异步js，xml
异步刷新：如果网页中某一个地方需要修改，异步刷新可以使只刷新的地方修改，而不是全局修改，比如，你看视频点赞不可能你点一个赞就刷新整个视频页面吧

---

2.js实现Ajax

js：
XMLHttpRequest对象
XMLHttpRequest对象的方法：

2-1:open(方法名（提交方式get，post）,服务器地址,true)
第三个参数是true表示异步请求，false表示同步请求
该方法作用：与服务端建立连接

2-2：send():
get: send(null)
post: send(参数值)
作用：发送数据。

2-3:sendRequestHeader(header,value):
请求头信息
get:不需要设置此方法。
post：需要设置：
a.如果请求元素中包含了文件上传。
setRequestHeader(“Content-Type”,”multipart/form-data”)
b.不包含文件上传
setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)

XMLHttpRequest对象的属性：
readystate:请求状态

只有状态为4代表请求完毕才算完成。
state：响应状态

只有200才响应正常

onreadyStatechange：回调函数。

图中b执行完就去执行a了

responseText：响应格式为String
responseXML：响应格式为
XML

---

3.注册时验证手机号码是否存在实例（js版Ajax）

这里就不连接数据库操作了
假设存在18888888888个号码，如果输入这个号码则会提示存在。
注册页面
register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>








    手机号码：
    

    

Servlet：

package control;

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;

/**
 * Servlet implementation class mobileServlet
 */
public class mobileServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String mobile = request.getParameter("mobile");
        //假设此时数据库中只有一个号码：18888888888
        PrintWriter out = response.getWriter();
        if("18888888888".equals(mobile)){
            out.write("true");//servlet以输出流的方式将信息返回给客户端
        }else{
            out.write("false");
        }
        out.close();
    }

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

}

程序我额外输出了请求状态的值，可以参看上面的方法。

---

4.使用JQuery实现Ajax

首先引用jQuery的架包

建立一个js
$.ajax({
url:服务器地址
请求方式：get，post
data：请求数据
success：function（result,testStatus）//result保存返回值，testStatus保存请求状态
{

}
error：function（xhr,errorMessage,e）
{

}
})

上述是jqueryajax的三种模板都能使用。
下面使用jquery版ajax
servlet就是上面的servlet
code:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>









    手机号码：