企业开发必备知识ajax

企业开发必备知识ajax

学习Ajax的前置知识—json

JSON是什么

• JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的一个子集，易于人的编写和阅读，也易于机器解析。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C，C++，C#，，Java，JavaScript，Perl，Python等）。这些特性使JSON成为理想的数据交换语言。
• 一言蔽之
  • Json是用来做格式交换的一种语言

JSON的语法格式

• 属性名称必须是双引号括起来的字符串
• 最后一个属性后不能有逗号

JSON的作用

• 用于传输数据

序列化和反序列化

• 对象序列化后可以在网络上传输，或保存在硬盘上

前后端交互的革命技术之ajax

什么是ajax

• 以前前后端是后端返回整个htm
  • ·每次更新一些数据，他都会整个网页刷新
• 现在
  • ajax帮助我们向服务器发异步请求

什么是同步，什么是异步

• 煮着开水，在旁边盯着，等到水开了，你才做下件事（同步）
• 煮着开水，同时你继续做了其他事（异步）

原理

• 通过xmlHttpRequest对象向服务器发异步请求，从服务器或的数据
• 然后通过js来操作DOM而更新页面
• 它是在IE5中首先引入的，是一种支持异步请求的技术
• 简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果
• 注意
  • JavaScript是单线程的，会阻塞代码运行，所以引入XmlHttpRequest 请求处理异步数据

使用ajax

创建ajax对象

if (window.XMLHttpRequest){
 xhr = new XMLHttpRequest();
} else {// code for IE6, IE5
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

设置请求地址及方式

//第一个参数是用于指定请求的方式，一般用大写
//第2个参数代表请求的URL
//第三个参数是表示是否异步发送请求的布尔值，如果不填写，默认为true，表示异步发送
xhr.open（"get"，"https://api.xdclass.net/pub/api/v1/w eb/index_card"，false）

发送请求（可选参数，null）

xhr.send()

等到浏览器返回结果接收响应

/*
on readystate change事件
	readystate属性：请求状态
	0	（初始化）还没有调用open（）方法
	1	（载入）已调用send（）方法，正在发送请求
	2	（载入完成）send（）方法完成，已收到全部响应内容
	3	（解析）正在解析响应内容
	4（完成）响应内容解析完成，可以在客户端调用了
*/
xhr.onreadystatechange=function（）{
if（xhr.readyState==4）{
//容错处理
if（xhr.status==200）{
alert（xhr.responseText）；
}else{
alert（'出错了，Err:'+xhr.status）；
}}