JS Ajax与JQuery Ajax的使用

一、JS Ajax

1.创建xhr对象

var xhr = new XMLHttpRequest(); 此方式不支持IE5和IE6

2.open方法，设置请求信息

open(method,url,async)

method：请求类型；GET或POST

url：请求路径

async：true（异步）或 false（同步）

3.send方法，发送请求

send(string)

如果是GET请求，则xhr.send()；如果是POST请求，string为请求参数，xhr.send("key1=value1&key2=value2")；

4.onreadystatechange、readyState、status

每当readyState改变时，就会触发onreadystatechange事件

onreadystatechange：每当 readyState 属性改变时，就会调用该函数

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

status：200: "OK"；404: 未找到页面

function ajaxRequest() {
    //1.创建xhr对象
    var xhr = new XMLHttpRequest();
    //2.设置请求信息 method请求类型GET、POST，url请求地址，async是否异步，默认true（异步）
    xhr.open('GET', 'AJAXServlet', true);
    //3.发送请求
    xhr.send();
    
    //onreadystatechange每当请求状态改变就会执行
    xhr.onreadystatechange = function() {
        //当请求已完成并成功响应的时候
        if (xhr.readyState == 4 && xhr.status == 200){
            alert(xhr.responseText);
        }
    };

二、JQuery Ajax

1. $.get

jQuery.get(url, [data], [callback], [type])

url：请求的地址；

data：要发送的key/value参数；

callback：回调函数；

type：返回内容的格式，xml，html，text，script，json

对于get请求，[data]会拼接到请求路径中

servlet代码：

public class AJAXServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //{"name":"zhangsan","age","18"}
        String str = "{\"name\":\"zhangsan\",\"age\":\"18\"}";
        System.out.println(str);
        resp.getWriter().write(str);
    }
}

JQuery代码：

function ajaxRequest() {
    $.get('AJAXServlet?para1=p1', {para2:'p2', para3:'p3'}, function(res) {
        var obj = res;
        alert(obj.name);
        alert(obj.age);
    }, 'json');
}

2. $.post

jQuery.post(url, [data], [callback], [type])

与$.get类型，不同的是$.post的[data]会放到请求体中

3. $.ajax

jQuery.ajax(url,[settings])

type：请求方式get或post，默认get；

dataType：返回内容的格式，xml，html，text，script，json；

data：data的值可以是一个对象{"para1":"p1", "para2":"p2"}，也可以是字符串"para1=p1&para2=p2"

表单序列化，$("#form").serialize()，返回的就是字符串，类似"para1=p1&para2=p2"

function ajaxRequest() {
    $.ajax({
        url:'AJAXServlet',
        data:{"para1":"p1", "para2":"p2"},
        type:'POST',
        async:true,
        dataType:'json',
        success:function (res) {
            alert(res);
            alert(res.name);
        },
        error:function () {
            alert("发送错误");
        }
    });
}