JavaScript异步Ajax与json总结

JavaScript异步Ajax与json总结

JSON简介

JSON:JavaScript对象表示法（JavaScript Object Notation）

但json与js为两门不同的语言；

Josn中的对象，类似于js中的对象，但也有区别，在js中，键值对的情况下，属性名可以加上双引号，

也可以不加双引号，但在josn中，属性名必须加上双引号；

JSON是存储和交换文本信息的语法：

     1.JSON是轻量级的文本数据交换格式

     2.JSON独立于语言和平台

     3.JSON具有自我描述性，更容易理解。

       类似于xml,比XML更小、更快、更易解析

       (XML:指可扩展标记语言。XML被设计用来传输和存储数据。)

1.1 JSON语法

           JSON语法是JavaScript对象表示语法的子集

           1.数据在名称/值对中(数据在键值对中)

           2.数据由逗号分隔

           3.花括号保存对象({})

           4.方括号保存数组([])

JSON值可以是：

           数字（整数或浮点数）

           字符串（在双引号中）

           布尔值（true或false）

           数组（在方括号中）

           对象（在花括号中），只是自定义对象；

           null

对象里面，可继续嵌套对象；

JSON对象与JS对象有2个不同的地方：

1.没有声明变量（JSON中没有变量的概念）

2.末尾没有分号（因为这不是JavaScript语句，所以不需要分号），但在js中，则要分号；

例如： //为JS中的数组

var book = [23,
“hello”, true];

//为JSON数组（直接在方括号中书写则可，数组可包含多个对象）

  2. [23, "hello", true]     

将JavaScript对象转为json对象

解析与序列化

JSON对象有两个方法：

   1.stringify():将JS对象序列化为JSON字符串

   2. parse() [pɑ:z] :将JSON字符串解析为原生的JS值











1.  var str
= JSON.stringify(obj); //将JS对象序列化为JSON字符串
        
2.  var
obj1 = JSON.parse(jsonstr); //将JSON字符串解析为原生的JS对象

例：

注意：虽然obj与obj1具有相同的属性，但它们是两个独立的、没有任何关系的对象

Ajax 简介

 （Asynchronous

JavaScript and XML（异步的 JavaScript 和 XML）） [eɪˈsɪŋkrənəs]

1.Ajax不是某种编程语言

   AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

   传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

   有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等等

2.同步与异步

同步：就是指一个进程在执行某个请求的时候，

   若该请求需要一段时间才能返回信息，

   那么这个进程将会一直等待下去，

   直到收到返回信息才继续执行下去；

同步的执行顺序为从上到下，先是执行第一个数据，等第一个数据执行完成后，才会继续执行第二个数据；比较消耗时间；

异步：是指进程不需要一直等下去，

   而是继续执行下面的操作，不管其他进程的状态。

   当有消息返回时系统会通知进程进行处理，

   这样可以提高执行的效率。

 则在执行第一个数据的时候，第二个、第三数据也在执行了，时间效率比较快，不用等待；

异步实现：

   1、运用HTML与CSS来实现页面，表达信息

   2、运用XMLHttpRequest和web服务器进行数据的异步交互

   3、运用JavaScript操作DOM，实现动态局部刷新

3. AJAX-创建XMLHttpRequest 对象

     XMLHttpRequest对象用于在后台与服务器交换数据；
   
     创建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");
         }

4. AJAX - 向服务器发送请求

   向服务器发送请求,我们使用XMLHttpRequest对象的 open() 和 send() 方法：

   open(method,url,asyns) 规定请求的类型、URL 以及是否异步处理请求。

参数说明：

 method：请求的类型；GET 或 POST 

 url：文件在服务器上的位置 

 async：true（异步）或 false（同步）Asynchronous 

 send(string):将请求发送到服务器

参数说明:string 仅用于POST请求

l 方法1：一个简单的GET请求:

xhr.open("GET","/Ajax02/getInfor",true)
 
参数1，发送方式
   参数2，发送地址     参数3，为布尔值，可选；

例：

  xhr.send();

l 方法2：一个简单的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: 规定头的值

5. AJAX 服务器响应

   使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应

   responseText:获得字符串形式的响应数据。

   responseXML：获得
   XML 形式的响应数据。

6.AJAX
onreadystatechange事件

  在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，

  每当readyState改变时，就会触发onreadystatechange事件。

以下为XMLHttpRequest对象的三个重要属性：

onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。

readyState:存有XMLHttpRequest的状态。从0到4发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

状态码：200；

status: 200: “OK” 404: 未找到页面

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState等于4且status为 200 时，表示响应已就绪；才接收数据；

语句：

xhr.onreadystatechange
= function () {
   if (xhr.readyState == 4 &&
xhr.status == 200) {
      var txt = xhr.responseText;
     
var obj
= JSON.parse(xhr.responseText);  //将JSON字符串解析为原生的JS对象
     
document.getElementById("txtName").value
= obj.name; //将输出的内容绑定到文本框上；
       }
    }

以上的举例和语句为XMLHttpRequest
从服务器上获取数据，第一种方法；

7.下面为：XMLHttpRequest 将页面数据提交给服务器，第二种方法；

function 定义函数(){
          
（ 获取元素的value值；）
            var name =
document.getElementById("txtName").value;
           （ 字符串的拼接，拼接的值一定要跟属性名一致；）
            var str = "name=" +
name ;
            //创建XMLHttpRequest对象
           （ 处理浏览器兼容性的问题）
            //向服务器发送请求
            xmlhttp.open("POST",
"/Ajax/receiveData");
            //指定响应头，在提交方式为POST时，必须加上响应头；
            xmlhttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
            xmlhttp.send(str);//发送数据
            //服务器响应
            xmlhttp.onreadystatechange =
function () {
                //响应已就绪
                if (xmlhttp.readyState == 4
&& xmlhttp.status == 200) {
                    //responseText 获取服务器 返回的结果
                   
console.log(xmlhttp.responseText)
                }
            }
        }

8.XMLHttpRequest 向服务器提交数据 FormData

FormData提供了一种表示表单数据的键值对的构造方式，经过它的数据可以

使用XMLHttpRequest.send()方法，本接口和本方法都相当简单直接；如果送出时的编码类型被

设为”multipart/form-date”,它会使用和表单一样的格式；

以第二种方法为例，在浏览器的兼容性问题前加上FormDate方法则可；

var data = new
FormData();  //使用该方法，可不用添加响应头；
           
data.append("name", name);//以键值对的方式；
           
data.append("sex", sex);
           
data.append("address", address);

例：

9.通过XMLHttpRequest对象获取json文件中的数据

window.onload = function ()
{
            函数方法的调用；
        }
        function 定义函数() {
           （ 写入浏览器兼容性的代码）
           
xmlhttp.open("GET", "../Content/student.json");//发送方式，地址；
           
xmlhttp.send();
           
xmlhttp.onreadystatechange = function ()
{
            （写入服务器已相应就绪的代码）
                   
var obj
= JSON.parse(xmlhttp.responseText);
                   
document.getElementById("txt").innerHTML
= obj.name + "<br/>" + obj.sex + "<br/>" +
obj.address;  //将获取到的数据，添加到页面上；
               
}
            }
        }

例：