Js原生Ajax和Jquery的Ajax

Posted 2020-11-04 flybluesky

1.什么是Ajax

　　一、什么是同步，什么是异步

　　　　同步现象：客户端发送请求到服务器端，当服务器返回响应之前

　　　　　　　　　客户端都处于等待卡死状态

　　　　异步现象：客户端发送请求到服务器端，无论服务器是否返回响应

　　　　　　　　　客户端都可以随 意做其他事情，不会被卡死

　　二、Ajax的运行原理

　　　　页面发起请求，会将请求发送给游览器的内核中的Ajax引擎中，Ajax引擎会提交请求到服务器端，

　　　　在这段时间里，客服端可以任意进行操作，直到服务器将数据返回Ajax之后，会触发你设置事件，

　　　　从而执行自定义的js逻辑代码完成某种页面的功能，实现页面的局部刷新。

2.js原生的Ajax

五步走

function f1(){
        //1.创建ajax对象
        var xmlHttp = new XMLHttpRequest();
        //2.绑定监听函数
        xmlHttp.onreadystatechange = function(){
            //判断数据是否正常返回
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //6.接收数据
                var res = xmlHttp.responseText;
                document.getElementById("span1").innerhtml = res;
            }
        }
        //3.绑定处理请求的地址,true为异步，false为同步
        //GET方式提交把参数加在地址后面?key1:value&key2:value
        xmlHttp.open("POST","/ajax/ajax1",true);
        //4.POST提交设置的协议头（GET方式省略）
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //POST提交将参数，如果是GET提交send不用提交参数
        //5.发送请求
        xmlHttp.send("name=zjj&age=18");
    }

3.Json数据格式

　　json是一种与语言无关的数据交换的格式，

　　作用：

　　　　使用ajax进行前后台数据交换

　　　　移动端与服务端的数据交换

　　一、json的格式和解析

　　　　　　json有两种格式

　　　　　　　　1.对象格式：{key1：value1，key2：value2}

var json = {"name":"xiaou","age":0}

　　　　　　　　2.数组/集合格式：[obj,obj,obj....]

 var json = [{"name":"xiaou","age":0},
         {"name":"xiaobei","age":1}]

　　　　　　　　两种格式可以分别套用

 var json ={
             "key1":"key1",
             "key2":{"name":"xiaou","age":0,"tel":8888888},
             "key3":[{"name":"xiaobei","age":1},
                     {"name":"xiaonian","age":2}]
     }

　　　　　　　　json的key是字符串而Json的Value是object

4.Jquery的Ajax技术

　　jquery是一个优秀的js框架，对js原生的Ajax进行了封装

　　在封装后的Ajax的操作更加简洁，功能更加强大

　　与Ajax操作相关方法有如下几种

　　

　　常见的三种Ajax请求方法

　　1）$.get(url, [data], [callback], [type])

　　2）$.post(url, [data], [callback], [type])

　　其中：

　　　　url：代表请求的服务器端地址

　　　　data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）

　　　　callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

　　　　type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）

　　　　常用的返回类型：text、json、html等　　

　　3）$.ajax( { option1:value1,option2:value2... } );

　　　　常用的option有如下：

　　　　async：是否异步，默认是true代表异步

　　　　data：发送到服务器的参数，建议使用json格式

　　　　dataType：服务器端返回的数据类型，常用text和json

　　　　success：成功响应执行的函数，对应的类型是function类型

　　　　type：请求方式，POST/GET

　　　　url：请求服务器端地址

　　最简单的提交例子

function f1(){
        $.get("/ajax/ajax2",{"name":"张三","age":18},function(data){alert(data.name);},"json");
    }
    function f2(){
        $.post("/ajax/ajax2",{"name":"李四","age":18},function(data){alert(data.age)},"json");
    }
    function f3(){
        $.ajax(    {
                url:"/ajax/ajax2",
                async:true,
                data:{"name":"李四","age":28},
                dataType:"json",
                success:function(data){alert(data.age);},
                error:function(){alert("请求错误");},
                type:"POST"
                });
    }

5.json解析jar

　　将java的对象或集合转成json形式的字符串

　　json的转换插件是通过java的一些工具，直接将java的对象和集合转换成json 的字符串

　　常见的json转换工具有：

　　　　1）jsonlib

　　　　2）Gson：google

　　　　3）fastjson：阿里巴巴