Ajax、json，原生JS和JQ使用Ajax

最新推荐文章于 2020-12-02 22:43:56 发布

爱弹卡农的码农

最新推荐文章于 2020-12-02 22:43:56 发布

阅读量770

点赞数

分类专栏： JavaScript 文章标签： ajax javascript json

本文链接：https://blog.csdn.net/NewFishCoder/article/details/53700663

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概念

Ajax：异步的JavaScript和XML ，用于在Web页面中实现异步数据交互。

原理

在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由 Ajax引擎代为向服务器提交请求。

优点

可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
避免用户不断刷新或者跳转页面，提高用户体验

缺点

对搜索引擎不友好
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制

属性

Ajax核心就是XMLHttpRequest对象,它的属性有：
responseText、responseXML、status、statusText、readyState…

方法

XMLHttpRequest对象方法：
open()、setRequestHeader()、send()、getRequestHeader()…

原生JS实现Ajax

readyState属性：表示请求/响应过程的当前活动阶段，取值为0-4，当值为4时表示已经接收到全部响应数据
onreadystatechange事件：readyState属性值改变时触发
status属性：HTTP状态码，取值为1XX，2XX，3XX，4XX，5XX
responseText属性 ：响应返回的文本
open()方法：启用一个请求以备发送
参数一：请求类型，GET或POST
参数二：请求的URL地址
参数三：是否异步发送的布尔值。true为异步，false为同步
send()方法：请求发送，接收一个参数为请求主体发送的数据，不发送数据则传入null

        var Ajax = {
            get: function(url,fn){
                var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象（IE7+、其他主流浏览器）
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                            alert(xhr.responseText);//请求发送成功
                        } else {
                            //请求发生失败
                        } 
                    }
                }
                xhr.open('GET',url,true);
                xhr.send(null);
            },
            post: function(url,data,fn){
                var xhr = new XMLHttpRequest();
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 设置请求头信息：发送信息至服务器时内容编码类型
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                            alert(xhr.responseText);//请求发送成功
                        } else {
                            //请求发生失败
                        } 
                    }
                }
                xhr.open('POST',url,true);
                xhr.send(data);
            }
        }

可以看出，post请求多传入了一个data数据参数，它作为请求的主体提交，并设置了一个请求头。

get与post的区别

get是从服务器上获取数据，post是向服务器传送数据。
传递参数的方式不同：
get：把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
post：通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
服务器端用不同的方式获取提交的数据。
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

jQuery Ajax

$.load()
适合静态页面.
$(selector).load(URL,data,callback);

必需的 URL 参数
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
若传入了data参数（对象）默认为post方法发送

可选的 callback 参数是 load() 方法完成后所执行的回调函数名称。
回调函数可设置不同的参数

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含XMLHttpRequest对象

实例

        $('button').click(function(){
            $('#div1').load('demo_test.txt',function(responseTxt,statusTxt,xhr){
                if(statusTxt == 'success'){}
                if(statusTxt == 'error'){}
            })
        })

$.get()
用get方式发送
参数与load()相同，但是和post()方法都多了一个可选参数type——返回的数据类型，一般会自动识别

$.post()
用post方式发送

$.ajax()
直接看实例：


$.ajax({
            type: "GET",
            url: "Services/EFService.svc/Members",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                // Play with returned data in JSON format
            },
            error: function (msg) {
                alert(msg);
            }
        });

注：若是搜索、查询等操作的请求，需要将要查询的字符加到URL值后面

json

概念：
JSON是一种轻量级的数据交换格式，并不从属与JS，也不是只有JS才使用JSON
优点
轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）。

与XML比较：
JSON的长度比起来很短小
JSON读写速度更快
JSON可以用JS内建的发布方法直接进行解析，可与JS对象互转

JSON具有三种类型的值
简单值：JS中的4个基本数据类型，除了undefined
对象： JSON的对象属性必须加引号
数组

解析与序列化：
可以把JSON数据结构解析为有用的JS对象
JSON对象有两个方法

stringify() 把JS对象序列化JSON字符串注意，是字符串，保存在变量中
parse() 把JSON字符串解析为原生JS值

json对象与JS对象的区别

var jsObject={  
        name:"Nicholas",  
        age:29  
}  
var jsonObject={  
        "name":"Nicholas",  
        "age":29  
}

上面的两个JS对象分别是什么？在JS代码中第一个毫无疑问是JS对象，第二个所属就很模糊了，可以说是JS对象，也可以是JSON对象（JSON中没有对象的说法，为什么要称为JSON对象，jsonObject是JS中的JSON（格式的）对象，这么说没错，但有时会造成混乱）。第二个对象比较特殊，因为它即符合JS对象字面量的形式也符合JSON的表述方式，而它到底是什么要看你把它当作什么来用。