Javascript异步Ajax与json总结

一.Ajax含义   Ajax不是某种编程语言   Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术   传统的网页（不使用Ajax)，需更新内容时，必须重载整个网页2.同步、异步    同步：指一个进程在执行某个请求时，若须一段时间才返回信息，那么这个程序会一直等下去，直到收到返回信息才 继续执行 异步：不需要一直等下去，继续执行下面的操作，不管其他进程，这样可以提高效率异步实现：1.运用HTML和CSS来实现页面，表达信息           2.运用XML.HttpRequest和web服务器进行数据的异步交换              3.运用Javascript操作DOM，实现动态布局刷新3.AJAX-创建XMLHttpRequest 对象    XMLHttpRequest对象用于在后台与服务器交换数据（具体介绍可见w3c）所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象创建XMLHttpRequest对象的语法： var xhr = new XMLHttpRequest();老版本的Internet Explorer(IE5和IE6)使用ActiveXObject对象：             var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);   注：ActiveXObject 用于判断使用的浏览器是什么浏览器，为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象，如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject4. 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: 规定头的值5.AJAX 服务器响应    使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应responseText: 获得字符串形式的响应数据  responseXML：获得 XML 形式的响应数据    AJAX onreadystatechange事件：在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，每当readyState改变时，就会触发onreadystatechange事件下面是XMLHttpRequest对象的三个重要属性：onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数     readyState:存有XMLHttpRequest的状态从0到4发生变化： 0: 请求未初始化    1: 服务器连接已建立      2: 请求已接收          3: 请求处理中     4: 请求已完成，且响应已就绪   在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务，当readyState等于4且status为 200 时，表示响应已就绪：                    xhr.onreadystatechange = function () {                        if (xhr.readyState == 4 && xhr.status == 200) {                            var txt = xhr.responseText;                            console.log(txt);                        }                    }  二、JSON含义  Jacvascript对象表示法（Jacvascript  object  Notation）        JSON是储存和交换文本语言的语法，是轻量级的文本数据交换格式     JASON独立于语言和平台JASON具有自我描述性，更容易理解       类似于xml，但JSON比XML更小，更快，更容易解析        XML：指可扩展标记语言。XML被设计用来传输和存储数据2. JSON语法：是Javascript对象表示语法的子集          1.数据在名称/键值对中(键值对中必须使用双引号)          2.数据由逗号分隔          3.花括号保存对象{}          4.方括号保存数组[]      JSON可以是：数字（整数或浮点数）、字符串（在双引号中）、布尔值（true或false）、数组（在方括号中）、对象（在花括号中）、null    js的数据类型String Number Boolean Undefined Null Object（内建对象 自定义对象） js对象：      var obj = {           name:“张三”，           sex：“男”，           age:“20”       };JSON对象(区别于js对象：键值对中属性和属性值必须使用双引号,都不使用分号结尾) JSON对象：{           “name”: “zhangsan”,           “sex”: “nan”,           “age”: “23”,           “address”: “jiuwangmaio”       }注：js数组： var book=[12,3,4,“hello”,true];     在JSON中表示数组（不用分号结尾）： [12,3,4,“hello”,true]3.将js对象转化为json对象      1. strinify():将js对象序列化为JMSON字符串      2. parse() [pa:a] :将JSON字符串解析为原生的js值例：js对象      var obj={“employees”:[{ “firstName”:“zhangsna”,“lastName”:“Gates”},              { “firstName”:“zhangsna”,“lastName”:“Gates”},               { “firstName”:“zhangsna”,“lastName”:“Gates”}]        };  转化json为对象  var str = JSON.stringify(obj); //将js对象序列化为JMSON字符串       console.log(str)     若已经有字符串Var jsonstr=’{“employees”:[{ “firstName”:“zhangsna”,“lastName”:“Gates”},{ “firstName”:“zhangsna”,“lastName”:“Gates”},{ “firstName”:“zhangsna”,“lastName”:“Gates”} ]}’        var obj1 = JSON.parse(jsonstr);  //将JSON字符串解析为原生的js值