AJAX

　　AJAX全称：async javascript and xml（ 现可用  json  代替xml  ）

　　Ajax概念：异步的javascript和xml，用于浏览器和后台服务进行异步交互（传递信息）

　　1) 特点：

　　　　不会导致页面的全局刷新就可以进行与后台的交互

　　　　交互需要在"查看元素 -> 网络"中监控

　　2) 使用方式

　　　　XMLHttpRequest

　　　　1. 实例化

　　　　　　var xhr = new XMLHttpRequest();

　　　　2. 设置请求

　　　　　　xhr.open(method,url);

　　　　3. 设置头信息

　　　　　　xhr.setRequestHeader()

　　　　4. 设置体信息（method为post时候）

　　　　　　xhr.send(data);

　　　　5. 设置监听

　　　　　　xhr.onreadystatechange = function(){

　　　　　　　　this.readyState // 1 2 3 4

　　　　　　　　this.status // 200 404 500　　200(ok)    404(not found file：找不到资源，前端出错)    500(error：后台异常)

　　　　　　　　this.response // 响应信息

　　　　　　}

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-get</title>
    <script>
    // onload 事件会在页面或图像加载完成后立即发生,使加载页面完毕后再执行JS代码
    window.onload = function(){
        // 声明函数
        function getAllCustomer(){
            // 实例化xhr对象
            var xhr = new XMLHttpRequest();
            // 设置请求行
            //外网地址,需联网
            xhr.open("get","http://134.175.154.93:6677/customer/findCustomerAll");
            // 教室局域网上的地址,需插网线
            // xhr.open("get","http://172.16.5.250:6677/customer/findCustomerAll");
            // 设置请求头（Content-Type）
            xhr.responseType = "json";
            // 设置请求体
            xhr.send();
            // 监听响应
            xhr.onreadystatechange = function(){
                //如果接受成功返回值为4时
                if(this.readyState === 4 ){
                    //如果返回值为Ok即使200时
                    if(this.status === 200){
                        //打印响应信息
                        console.log(this.response);
                    //如果返回值为非200时
                    } else {
                        //打印错误,并打印错误信息
                        console.log("error:",this.response);
                    }
                } 
            }
        }
        // 调用getAllCustomer获取数据
        getAllCustomer();
    }
    </script>
</head>
<body>

</body>
</html>

 

jQuery中的ajax [基于回调函数]

　　1）速写方法

　　　　$.get(url[,data][,success][,dataType])

　　　　　　以get方式请求

　　　　　　　　url 请求地址

　　　　　　　　data 请求参数，对象

　　　　　　　　success 回调函数

　　　　　　　　dataType responseType

示例如下：

$(function(){
　　//请求地址
　　var url = "http://133.177.144.33:5555/address/findAddressAll";
　　//请求参数
　　var param = {id:2}
　　//请求方法(速写)
　　//请求地址,请求参数,回调函数()
　　$.get(url,{id:2},function(data,textStatus){
   　　//打印获取到的信息
   　　console.log(data,"---");
   　　//打印当前状态
   　　console.log("-----",textStatus);
　　})
})

　　　　

　　　　$.post(url[,data][,success][,dataType])

　　　　　　以post方式请求

　　　　　　　　url 请求地址

　　　　　　　　data 请求参数，对象

　　　　　　　　success 回调函数

　　　　　　　　dataType responseType

示例如下：

$(function(){
    //请求地址
    var url = "http://133.177.144.33:5555/address/insertAddress";
    //请求参数
    var data = {
        province:"甘肃省",
        city:"兰州市",
        area:"七里河",
        address:"人民路",
        telephone:"18822220000"
    }
    // content-type, querystring
    //请求地址,请求参数,回调函数()
    $.post(url,data,function(response,status){
        //打印添加结果(后台传递的数据)
        console.log(response,"---");
        //打印当前状态
        console.log("---",status);
    })
})

 

　　2）低级别接口

　　　　$.ajax({

　　　　　　url,

　　　　　　data,

　　　　　　success,

　　　　　　...

　　　　})