加粗样式JavaScript异步Ajax与json总结.

.Null

于 2020-04-30 10:38:20 发布

阅读量375

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47250135/article/details/105856358

版权

开发工具与关键技术：Visual Studio 2015 与 JavaScript
作者：周秋梅
撰写时间：2020年4月30日

加粗样式JavaScript异步Ajax与json总结.
一．Ajax 简介
（Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）） [eɪˈsɪŋkrənəs]
1.什么是 AJAX ？
Ajax不是某种编程语言，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等等

1.2 同步与异步
同步：就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，
那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
同步 //请求一 1ms //请求二 1ms //请求三 1ms 异步 1.3ms
异步：是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。
当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
异步实现：
1、运用HTML与CSS来实现页面，表达信息
2、运用XMLHttpRequest和web服务器进行数据的异步交换
3、运用JavaScript操作DOM，实现动态局部刷新

1.3 AJAX-创建XMLHttpRequest 对象
什么是XMLHttpRequest对象？
XMLHttpRequest对象用于在后台与服务器交换数据（具体介绍可见w3c）
创建XMLHttpRequest对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari
以及 Opera）均内建 XMLHttpRequest 对象。
创建XMLHttpRequest对象的语法：
var xhr = new XMLHttpRequest();
老版本的Internet Explorer(IE5和IE6)使用ActiveXObject对象：
var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象.如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xhr;
if(window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}else{
// code for IE6, IE5
xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
}

        1.4 AJAX - 向服务器发送请求
            向服务器发送请求,我们使用XMLHttpRequest对象的 open() 和 send() 方法：
            open(method,url,asyns) 规定请求的类型、URL 以及是否异步处理请求。
                参数说明：
                method：请求的类型；GET 或 POST 
                url：文件在服务器上的位置 
                async：true（异步）或 false（同步）Asynchronous 
            send(string):将请求发送到服务器
                参数说明:string 仅用于POST请求 
            一个简单的GET请求:
                xhr.open("GET","/Ajax02/getInfor",true)
                xhr.send();
            一个简单的POST请求:
                xhr.open("POST","/Ajax02/getInfor",true)
                xhr.send();
            如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头然后在 send() 方法中规定您希望发送的数据：
                xhr.open("POST","/jQueryAjax/postPersonInfor",true);
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.send(data);//data表单中需要提交的数据（字符串）
            setRequestHeader语法：
            setRequestHeader(header,value)：向请求添加HTTP头。
                参数说明：
                    header: 规定头的名称 
                    value: 规定头的值
    */

    /*
        1.5 AJAX 服务器响应
            使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应
            responseText:获得字符串形式的响应数据。
            responseXML：获得 XML 形式的响应数据。
        1.6 AJAX onreadystatechange事件
            在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，
            每当readyState改变时，就会触发onreadystatechange事件。
        下面是XMLHttpRequest对象的三个重要属性：
            onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
            readyState:存有XMLHttpRequest的状态。从0到4发生变化。
                0: 请求未初始化 
                1: 服务器连接已建立 
                2: 请求已接收 
                3: 请求处理中 
                4: 请求已完成，且响应已就绪 
            status: 200: "OK"  404: 未找到页面
            在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
            当readyState等于4且status为 200 时，表示响应已就绪：
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var txt = xhr.responseText;
                    console.log(txt);
                }
            }

二．JSON简介
JSON:JavaScript对象表示法（JavaScript Object Notation）
JSON是存储和交换文本信息的语法：
1.JSON是轻量级的文本数据交换格式2.JSON独立于语言和平台3.JSON具有自我描述性，更容易理解。
类似于xml,比XML更小、更快、更易解析，(XML:指可扩展标记语言。XML被设计用来传输和存储数据。)

1.1 JSON语法
SON语法是JavaScript对象表示语法的子集
1.数据在名称/值对中(数据在键值对中) 2.数据由逗号分隔 3.花括号保存对象({}) 4.方括号保存数组([])
JSON值可以是：
数字（整数或浮点数）字符串（在双引号中）布尔值（true或false）
数组（在方括号中）对象（在花括号中） null
js对象的属性值：JS的数据类型：String Number Boolean Undefined Null Object（内建对象自定义对象

1.2 JSON对象与JS对象有2个地方不一样：
1.没有声明变量（JSON中没有变量的概念）2.末尾没有分号（因不是JavaScript语句，所以不需要分号）

1.3 JSON数组（在方括号中书写，数组可包含多个对象） 2. 在JSON中，可采用同样的语法表示一个数组
注意： JSON数组中没有变量和分号
把数组和对象结合起来，可以构成更加复杂的数据集合，例如：json数组和对象结合的数据集合

将JavaScript对象转为json对象
1.4 解析与序列化
JSON对象有两个方法：
stringify():将JS对象序列化为JSON字符串 parse() [pɑ:z] :将JSON字符串解析为原生的JS值
1.将JS对象序列化为JSON字符串 2. 将JSON字符串解析为原生的JS对象
注意：虽然obj与obj1具有相同的属性，但它们是两个独立的、没有任何关系的对象

3.Student实体中的契约 [DataMember]，[DataContract]，是使用DataContractJsonSerializer序列化和反序列化必须要加的