Ajax的使用详解

一.原生 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",
                        // 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>