Ajax的使用详解

Posted 2021-06-07 咖啡加糖

一.原生 AJAX 请求的示例

<script type="text/javascript">
            // 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
            function ajaxRequest() {
                //1、我们首先要创建XMLHttpRequest 
                var xmlhttprequest = new XMLHttpRequest();
                //2、调用open方法设置请求参数
                xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
                //4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
                xmlhttprequest.onreadystatechange = function(){
                    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                        alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
                        var jsonObj = JSON.parse(xmlhttprequest.responseText);
                        // 把响应的数据显示在页面上
                        document.getElementById("div01").innerhtml = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
                    }
                }
                //3、调用send方法发送请求
                xmlhttprequest.send();

                alert("我是最后一行的代码");

            }
        </script>

 

二.jQuery 中的 AJAX 请求

1.$.ajax 方法

url　　   表示请求的地址

type　　表示请求的类型 GET 或 POST 请求

data　　表示发送给服务器的数据　　格式有两种：　　一：name=value&name=value　　二：{key:value}

success　　请求成功，响应的回调函数

dataType　　响应的数据类型　　常用的数据类型有：text 表示纯文本、xml 表示 xml 数据、json 表示 json 对象

 

2.$.get 方法和$.post 方法

url　　　　请求的 url 地址

data　　    发送的数据

callback　  成功的回调函数

type　　　 返回的数据类型

 

3.$.getJSON 方法

url　　　　请求的 url 地址

data　　　 发送给服务器的数据

callback　　成功的回调函数

 

4.表单序列化 serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。

 

<script type="text/javascript">
            $(function(){
                // ajax请求
                $("#ajaxBtn").click(function(){
                    $.ajax({
                        url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
                        //true为同步，false为异步
                        async: true,
                        // data:"action=jQueryAjax",
                        data:{action:"jQueryAjax"},
                        type:"GET",
                        success:function (data) {
                            // alert("服务器返回的数据是：" + data);
                            // var jsonObj = JSON.parse(data);
                            $("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
                        },
                        dataType : "json"
                    });
                });

                // ajax--get请求
                $("#getBtn").click(function(){

                    $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
                        $("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
                    },"json");
                    
                });
                
                // ajax--post请求
                $("#postBtn").click(function(){
                    // post请求
                    $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) {
                        $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
                    },"json");
                    
                });

                // ajax--getJson请求
                $("#getJSONBtn").click(function(){
                    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
                        $("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
                    });
                });

                // ajax请求
                $("#submit").click(function(){
                    // 把参数序列化
                    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
                        $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
                    });
                });
                
            });
</script>

 

三.jQuery的$.post()和$.get()如何进行同步请求

因为$.post()和$.get()是jquery对$.ajax()封装的异步调用接口的方法。如果需要同步请求的时候，可以进行如下操作：

1. 在$.post()或者$.get()前把ajax设置为同步：$.ajaxSettings.async = false;
2. 在$.post()或者$.get()后把ajax在改回异步：$.ajaxSettings.async = true;

//    调用接口
    $.ajaxSettings.async = false;
    $.post(url,data,function(res){
        cosole.log(res);
    })
    $.ajaxSettings.async = true;
    
//     此处的js将会在上面请求完成后才进行