ajax

AJAX

1.什么是AJAX?他的作用是什么？

       AJAX指异步JavaScript及XML（Asynchronous JavaScript And XML）。AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。

 

注意：AJAX 基于JavaScript和HTTP请求（HTTP requests）。

 

2.什么是同步通信？什么是异步通信？

（1）同步：前台页面给后台服务器一个请求（发送一个表单内容，传递一个url），服务器获取到请求数据之后给前台页面一个响应，在这个过程当中，前台页面一直在等待（停止所有的动作）。

（2）异步：前台页面给后台服务器一个请求（发送一个表单内容，传递一个url），服务器获取到请求数据之后给前台页面一个响应，在这个过程当中，前台页面正常工作。

 

3.怎么样实现异步通信？（AJAX技术：javascript或jquery）

 

4.步骤：web和server之间的通信

步骤一：建立一个通信对象（XMLHttpRequest对象）

步骤二：利用该对象的open来确定一个具体的通信url（给谁发送请求）open("GET"|"POST",服务器url,true(异步)|false(同步))

步骤三：发送请求send

步骤四：监听服务器给出的响应（接收响应）

onreadystatechange=function(){函数内容}--匿名函数：自动执行，不需要调用

onreadystatechange=callback--回调函数--自动执行，有名字，函数执行完后会给主程序一个响应

responseText|responseBody 属性会存储从服务器返回的数据。

 

二、AJAX数据处理方式：

1.HTML的处理方式（responseText）//document.getElementById("div").innerHTML+=xhr.responseText

2.XML的处理方式（responseXML及DOM）//xmlobj=xhr.responseXML;

优点：格式固定，容易扩展数据，层析清晰

缺点：节点的获取（有问题）

所以解析XML一般用服务器语言（DOM）

3.JSON（eval函数格式化及responseJSON）

JSON：利用js的对象来表示的数据（字符串)//jsonObj=eval("("+xhr.responseText+")")

js字面量：

1.对象字面量：

{

stu1:{name:"张三",sex:"男",birthday:{year:1990,month:12,day:12}},

stu2:{name:"李四",sex:"男",birthday:{year:1990,month:12,day:12}},

stu3:{name:"王五",sex:"男",birthday:{year:1990,month:12,day:12}},

stu4:{name:"赵六",sex:"男",birthday:{year:1990,month:12,day:12}}

}

{属性名:属性值,...}

优点：访问简单，易获取（通过eval转换格式）

缺点：格式不固定，没有规则（写json的时候格外注意）

2.数组字面量：[{属性:值},{值},{...}]

[

{name:"张三",sex:"男",birthday:{year:1990,month:12,day:12}},

{name:"李四",sex:"男",birthday:{year:1990,month:12,day:12}},

{name:"王五",sex:"男",birthday:{year:1990,month:12,day:12}},

{name:"赵六",sex:"男",birthday:{year:1990,month:12,day:12}}

]

 

二、注意事项

1、服务器给浏览器返回的数据格式：

普通文本：服务器用echo输出，客户端用xhr.responseText接收

Json格式：服务器echojson_encode()输出json格式数据，客户端xhr.responseText接收

Xml格式：必须发送头文件（header(“content-Type:text/xml;charset=utf8”)）告知浏览器返回xml文件，客户端xhr.responseXML接收

2、get与post区别

(1) Get请求时一定要注意地址栏不变，是因为缓存的问题，

解决方法：地址栏添加随即数，（Math.random()）。发送header头信息命令浏览器不要缓存数据（header(“cache-control;no-cache”)）

(2)get时，参数写在url中，encodeURL（）防止乱码，math.random加随机数，防止缓存

Post 时，必须加上 xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”), 参数写在 send （）函数中