AJAX异步请求JSON格式数据

AJAX异步请求JSON格式数据

AJAX异步请求

A: 异步Asynchronous

J: JavaScript

A: And

X: XML

同步请求: 客户端请求到服务器,如果服务器没有响应,客户端只能等待,卡死

异步请求: 客户端请求到服务器,如果服务器没有响应,客户可是自由活动

AJAX的运行原理

浏览器内置了AJAX的引擎

原生态的JavaScript实现异步请求

实现步骤

• 获取AJAX引擎
• 设置回调函数
  • 自定义函数,服务器响应成功后,自动调用函数
• 设置请求服务器路径
• 提交

<script type="text/javascript">
    /**
     * 原生态的JavaScript实现AJAX异步请求
     */
    function fn() {
   
        //获取AJAX引擎对象，XMLHttpRequest
        var xmlhttp = new XMLHttpRequest();
        //对象调用了事件,AJAX引擎的状态变化
        xmlhttp.onreadystatechange=function()
        {
   
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
   
                //xmlhttp.responseText: AJAX引擎对象属性,服务器响应回来的文本数据
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        //设置服务器路径
        xmlhttp.open("GET","/WEB11/js_ajax");
        //提交请求
        xmlhttp.send();
    }
</script>

jQuery的AJAX请求

$.get()函数

• 参数解释
  • url: 提交的服务器地址
  • data:提交到服务器的数据 k=v&k=v
  • 回调函数:服务器响应成功,自动调用函数
  • type: 服务器响应回来的数据类型 ,text, json

<script type="text/javascript">
    function fn() {
   
        /**
         *  jQuery中的函数get异步请求
         */
        $.get(
            //传递服务器路径
            "/web11/jquery_get",
            //传递提交到服务器的参数
            "username=zhangsan&age=20",
            //回调函数,服务器响应成功,调用函数
            //服务器响应回来的数据,传递到函数的参数
            function (data) {
   
                alert(data);
            },
            //服务器响应的数据格式
            "text"
        );
    }
</script>

$.post()函数

<script type="text/javascript">
    function fn() {
   
        /**
         *  jQuery中的函数post异步请求
         */
        $.post(
            //传递服务器路径
            "/web11/jquery_post",
            //传递提交到服务器的参数
            "username=zhangsan&age=20",
            //回调函数,服务器响应成功,调用函数
            //服务器响应回来的数据,传递到函数的参数
            function (data) {
   
                alert(data);
            },
            //服务器响应的数据格式
            "text"
        );
    }
</script>

$.ajax()函数

jQuery的异步请求函数 ajax(), 他是get和post的底层函数

使用get或者post的时候,调用的底层都是ajax函数

上层函数: 代码简单,但可以控制内容少

底层函数: 代码量多,灵活性很大,可以控制的内容更多

• 函数的参数
  • url:服务器请求地址
  • async: 异步请求或者同步请求,默认是true,表示异步
  • data:请求到服务器参数 k=v
  • dataType:接收服务器响应的数据格式 text json
  • error:服务器响应失败的回调函数
  • success:服务器响应成功的回调函数
  • type:get请求或者是post

<script type="text/javascript">
    function fn() {
   
        /**
         * jQuery的底层函数ajax实现异步请求
         * $.ajax({
         *    k:v,
         *    k:v
         * })
         */
        $.ajax({
   
            //服务器路径
            url:"/WEB11/jquery_ajax",
            //提交服务器的数据
            data:"username=zhangsan&age=20",
            //响应失败的回调函数
            error:function()