JavaScript异步Ajax与json总结_网页异步加载 js json是ajax吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_44591600/article/details/105866549

关于Ajax：它不是某种编程语言，而是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页面。有很多使用Ajax的应用程序案例：新浪微博、Goole地图等等；
即有同步和异步的2个不同的操作：前者是一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
而异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回系统会通知进程进行处理，这样可以提高效率。
异步的实现：1.运用HTML与CSS来实现页面，表达信息。2.运用XMLHttpRequest和Web服务器进行数据的异步交换；3.运用JavaScript操作DOM，实现动态局部刷新；
XMLHttpRequest对象：用于在后台与服务器交换数据，具体的可以在W3C的手册查看。所以现代浏览器（IE7+、Firefox、Chrome、Safari等等）均内建XMLHttpRequest对象。
创建XMLHttpRequest对象的语法：
var xhr= new XMLHttpRequest（）；
老版本的Interet Explorer（IE5和IE6）使用ActiveXObject对象：
Var xhr= new ActiveXObject(“Microsoft.XMLHTTP”)；
为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象，如果支持，则创建XMLHttpRequest对象。如果不支持，则创建ActiveXObject；代码如下：

     var xhr；
if(window.XMLHttpReequest){
   Xhr=new XMLHttpRequest()；
}else{
    xhr=new ActiveXObject（“Microsoft.XMLHTTP”）；
}

向服务器发送请求，我们使用XMLHttpRequest对象的open（）和send（）方法：open（method，url，asyns）规定请求的类型、URL 以及是否异步处理请求。参数说明：method：请求的类型；GET或POST；url：文件在服务器上的位置。 Async：true（异步）或false（同步）Asynchronous send（string）：将请求发送到服务器；
如果需要像HTML表单那样POST数据，请使用setRequesHeader（）来添加HTTP头然后在send（）方法中规定您希望发送的数据；如下：

xhr.open(“POST,/jQueryAjax/postPersonInfor”,true)；
xhr.setRequesHeader(“Content-type”,“application/x-www-form-urlencoded”)；
xhr.send(data)://data表单中需要提交的数据（字符串）
setRequestHeder语法：
setRequestHeader（header,value）:向请求添加HTTP头。Header：规定头的名称；value：头的值；

然后是AJAX 服务器的响应，使用XMLHttpRequest对象的 responseTex或responseXML属性获取来自服务器的响应；responseText:获得字符串形式的响应数据。responseXML：获得XML 形式的响应数据。
关于AJAX onreadystatechange事件，在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，每当readyState改变时，就会触发onreadystatechange事件。
下面是XMLHttpRequest对象的三个重要属性：onreadystatechage：存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
ReadyState：存有XMLHttpRequest的状态，从0到4发送变化。0：请求未初始化；1：服务器连接已建立；2.请求已接收；3：请求处理中；4：请求已完成，且响应已就绪；
Status：200：“OK” 404:未找到页面
在onredystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当readyState等于4且status为200时，表示响应已就绪：代码如下：

 Xhr.onreadystatechange = function(){
   if (xhr.readyState == 4 && xhr.status == 200){
   var txt = xhr.responseText；
   console.log(txt)；
}

最后，关于JSON的简介：Javascript对象表示法（JavaScript Object Notation）存储和交换文本信息的语法：1.JSON是轻量级的文本数据交换格式；2.JSON独立于语言和平台；3.JSON具有自我描述性，更容易理解；类似于xml，比XML更小、更快、更易解析（XML：指可扩展标记语言。XML被设计用来传输和存储数据。）
语法是JavaScript对象表示语法的子集：1.数据在名称/值对中（数据在键值对中）；2.数据有逗号分隔；3.花括号保存对象（{}）；4.方括号保存数值（[]）
JSON值可以是：数字（整数或浮点数）、字符串（双引号中）、布尔值（true或false）、数值（在方括号中）、对象（在花括号中）、null；
Json对象与JS对象有2个地方不一样；1.没有声明变量（JSON中没有变量的概念）；2.末尾没有分号（因为这不是Javascript语句，所以不需要分号）；
在JSON中，可以采用同样的语法表示一个数组。[23,“hello”，true]；同样注意：JSON数组中没有变量和分号。
把数组和对象结合起来，可以构成更加复杂的数据集合，例如：json数组和对象结合的数据集合

{
   “employees”：[
{“firstName”：“Bill”，“lastName”：“Gates”}，
{“firstName”：“George”，“lastName”：“Bush”}，
{ “firstName”：“Thomas”，“lastName”：“Carter”}
]
}

将JavaScript对象转化json对象
JSON对象有两个方法：1.stringify（）：将JS对象序列化为JSON 字符串；2.parse（）[pɑ:z]:将Json字符串解析为原生的JS值；

 var str = JSON.stringify(obj)；//将JS对象序列化转化为JSON字符串
   console.log(str)；
   console.log（typeof str）；//string类型
   var jsonstr = ‘{“employess”：[{“firstName”：“Bill”，“lastName”：“Gates”}，{“firstName”：“George”，“lastName”：“Bush”}，{“firstName”：“Thomas”，“lastName”：“Carter”}]}’；
  var obj1 = JSON.parse(jsonstr)；//将JSON字符串解析为原生的JS对象
console.log（obj1）；