关于Ajax的一些介绍

一、Ajax简介

1、全称： Asynchronous JavaScript And XML，中文名就是：异步的JavaScript和XML。

拓展：什么是同步和异步？

同步：当我们通过浏览器向服务器发送一个请求时，浏览器会刷新整个页面。

异步：当我们向服务器发送请求时，不是刷新整个网页，而是只刷新网页的一部分。

2、AJAX就是通过JavaScript向服务器发送请求，并接收响应，然后我们在通过DOM(文档对象模型)来修改页面。

3、XML指的是服务器响应的数据的格式。
4、目前AJAX已经很少使用XML作为响应的格式。因为XML的解析性能及传输性能较差。

5、XMLHttpRequest对象

我们AJAX的所有操作都是围绕着XMLHttpRequest对象进行。
> 在XMLHttpRequest对象中封装发送给服务器请求报文，同时在服务器发回响应时，响应信息也会在对象中封装。
> 如何获取XMLHttpRequest对象
- var xhr = new XMLHttpRequest();

二、Ajax使用步骤

1、创建XMLHttpRequest对象

大部分比较新的浏览器都支持的方式（IE7以上）：
var xhr = new XMLHttpRequest();
IE6以下的：
var xhr = new ActiveXObject("Msxml2.XMLHTTP");

IE5.5以下的：
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

2、设置请求信息（请求地址，请求方式，请求参数）

xhr.open(请求方式,请求地址);

在发送post请求时，还需要设置一个请求头，如下：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3、发送请求

xhr.send(请求体);
get请求没有请求体，所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。

4、接收响应信息

//xhr绑定一个onreadystatechange响应函数，这个函数会在readyState属性发生改变时调用
			xhr.onreadystatechange = function(){
				//判断当前readyState是否为4 ， 且响应状态码为200
				if(xhr.readyState==4 && xhr.status==200){
					//读取响应信息，做相关操作。
					
					//如果信息为纯文本
					xhr.responseText
					
					//如果信息为XML
					xhr.responseXML
				}
			};

三、通过jQuery实现AJAX

使用get和getJSON都会有缓存问题，并且使用get方法不能传送较多的数据。post方法不会有缓存的问题，所以我们开发时使用post方法较多。

1、post()方法

$.post(url, [data], [callback], [type])
参数：
url：发送AJAX的请求地址，字符串。
data：发送给服务器的请求参数，JSON格式。
callback：当前需要获取服务器发送的响应时，我们可以通过该回调函数。(jQuery会将响应信息以回调函数的参数的形式返回)
type：响应信息的类型，字符串。一般两个常用值text、json
2、get()方法

get方法和post方法使用方式基本一致

四、JSON的介绍

1、JSON：JavaScript 对象表示法（JavaScript Object Notation），JSON 是存储和交换文本信息的语法，JSON 比 XML 更小、更快，更易解析。

2、json对象是用{}括起来的键值对结构。

1)、键和值之间用:分隔

2)、键值对之间用,分隔

3)、键必须是字符串类型，也就是说必须用""[双引号]引起来，不能使用单引号，也不能不用引号！

4)、JSON值的数据类型：
数字（整数或浮点数） 
字符串（在双引号中） 
逻辑值（true 或 false） 
数组（在方括号中） 
对象（在花括号中） 
null 

注意点：JSON对象是用{}括起来的，而数组是用[ ] 括起来的！