原生AJAX

AJAX请求发出去,客户端不需要等待，继续其他页面操作即可；服务端返回的也不是整个页面，是相关的数据,到达客户端后自动的局部刷新。
好处:用户体验好,网络传输量小。
特点：异步访问，局部加载。

原生AJAX

步骤

1. 创建XMLHTTPRequest对象
2. 与服务前连接
3. 回调函数
4. 发送AJAX请求

let xml;
function checkName(){
    document.getElementById("nameTips").innerHTML=""
    let name=document.getElementById("name").value;
    if (name==='woc'){
        document.getElementById("nameTips").innerHTML="非法用户名"
        return
    }
    //创建XMLHTTPRequest对象，低版本ie不支持这对象需要判断
    if(window.ActiveXObject()){
        xml=new ActiveXObject("Microsoft.XMLHTTP")
    }else {
        xml=new XMLHttpRequest();
    }
    //与服务前连接
    // xml.open("get","index.jsp?name="+name)
    xml.open("post","index.jsp")
    //post请求必须加这行
    xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //回调函数，可使用匿名函数
    xml.onreadystatechange=process;
    //发送AJAX请求
    // xml.send(null)
    xml.send("name="+name)
}
function process() {
    let tips=xml.responseText;
    if(xml.readyState===4){
        if (xml.status===200){
            document.getElementById("nameTips").innerHTML=tips
        }else {
            alert("AJAX请求错误")
        }
    }
}

post请求

xml.open("post","index.jsp")
//post请求必须加这行
xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xml.send("name="+name)

低版本ie解决

if(window.ActiveXObject()){
    xml=new ActiveXObject("Microsoft.XMLHTTP")
}else {
    xml=new XMLHttpRequest();
}

jsp验证AJAX请求并响应

//获取用户传过来的数据
String name=request.getParameter("name");
//对数据检查
boolean flag=true;
if (name.length()>6){
  flag=false;
}
//返回数据
if (flag){
  out.print("用户名可用");
}else {
  out.print("用户名超出范围，不合法");
}

执行过程

HTTP就绪状态,表示请求的状态或情形。在AJAX应用程序中需要了解五种就绪状态，但通常只使用状态4 :
0:请求没有建立(在调用open()之前)
1:请求已经建立但还没有发出(调用send()之前)
2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)
3:请求已经处理,响应中有部分数据可用,但是服务器还没有完成响应
4:响应已完成,可以访问服务器响应并使用它

状态码status

200
404

返回结果数据

responseText
responseXML

AJAX的核心是XMLHttpRequest

属性

xhr.readyState==4
xhr.status == 200
xhr.responseText
xhr.responseXML
xhr.statusText

方法

xhr.open(“get”, “checkName . jsp?uname=” +name);
xhr.setRequestHeader(" content-type", " application/x-www- form-urlencoded");
xhr.send(“uname=”+name);

事件

xhr.onreadystatechange = function(){}

jquey实现AJAX

$(function () {
    $("#name").blur(function () {
        let name = $("#name").val()
        $.ajax({
            type: 'post',//请求方式
            data: {//请求需要传递的参数
                name: name
            },
            dataType: "text",//返回值类型
            url: "index.jsp",//请求链接
            success: function (result) {//成功后回调
                $("#nameTips").html(result)
            },
            error:function (error) {//失败后回调
                $("#nameTips").html(error)
            }
        })
    })
})

Json

Json的两种格式：
Json表示对象: {键值对} var person = {“name”:“王五”,“age”:25,“wife’”:null}
Json表示数组: [数组元素] var arr=[“HTMlL”,“CSS”,"JavaScript’];

键值对通过级联取到值，数组则通过下标。

Json字符串将json对象用单引号包裹。
json对象转字符串

let str=JSON.stringify(obj)

json字符串转对象

let obj=JSON.prase(str)
obj=eval("let str="+str)
obj=eval("("+str+")")

实例

$(function(){
    $.ajax({
        url:" servlet/AreaServlet",
        data:{ parentId:0},
        dataType: "text",
        success : function(result){
        //1.json str ----json obj
            eval("var arr = "+result);
        //2.拼接option字符串
            var str= "";
            for(var i=0;i<arr.length;i++){
                str +="<option>value='"+arr[i].areaId+"'>"+arr[i].areaName+"</option>";
            }
        //3.将str写入指定的下拉列表
            $(" #province").html(str);
            getCity();
        }
    });
});