AJAX请求

什么是AJAX请求

AJAX 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术，Ajax 请求的局部更新，浏览器地址栏不会发生变化局部更新不会舍弃原来页面的内容。

原生AJAX请求的示例

    
        
        
        
        
        
        
    
      
        ajax request
        

        
    

jQuery中的AJAX请求

$.ajax 方法

url 表示请求的地址

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

data 表示发送给服务器的数据格式有两种：

一：name=value&name=value

二：{key:value}

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

dataType 响应的数据类型

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

// ajax请求
                $("#ajaxBtn").click(function(){
                    $.ajax({
                        url:"http://localhost:8080/08/ajaxServlet",
                        data:"action=JqAjax",
                        type:"GET",
                        success:function (data){
                            $("#msg").html("姓名："+ data.name + "  年龄："  + data.age);
                        },
                        dataType : "json"
                    });
                });

$.get 方法和$.post 方法

url 请求的 url 地址

data 发送的数据

callback 成功的回调函数

type 返回的数据类型

// ajax--get请求
                $("#getBtn").click(function(){
                    $.get("http://localhost:8080/08/ajaxServlet","action=jqGet",function (data){
                        $("#msg").html("姓名："+ data.name + "  年龄："  + data.age);
                    },"json");
                });
                
                // ajax--post请求
                $("#postBtn").click(function(){
                    $.post("http://localhost:8080/08/ajaxServlet","action=jqPost",function (data){
                        $("#msg").html("姓名："+ data.name + "  年龄："  + data.age);
                    },"json");
                    
                });

$.getJSON 方法

url 请求的 url 地址

data 发送给服务器的数据

callback 成功的回调函数

// ajax--getJson请求
                $("#getJSONBtn").click(function(){
                    $.getJSON("http://localhost:8080/08/ajaxServlet","action=jqGetJSON",function (data){
                        $("#msg").html("姓名："+ data.name + "  年龄："  + data.age);
                    });
                });

表单序列化 serialize()

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

// ajax请求
                $("#submit").click(function(){
                    $.getJSON("http://localhost:8080/08/ajaxServlet","action=jqSerialize&"+$("#form01").serialize(),function (data){
                        $("#msg").html("姓名："+ data.name + "  年龄："  + data.age);
                    });
                });