关于实现ajax的三种技术

Html

需要创建的文件：

 

 

Html中的内容：

<h2><a href="">第一个链接内容</a></h2>

步骤:

①　首先创建一个新的XMLHttpRequest()对象

②　调用对象的open方法，其中open方法的第一个参数为传递的请求是POST或者GET,第二个参数传递的是传送的URL,第三个参数表明是否为异步传递，默认值为FALSE。

③　调用对象的send方法,如果是GET请求为null，如果是POST请求需要设置响应头

setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

④　得到服务器的响应状态码从而来判断接收动作是否完成

onreadystatechange=function(){

if(resp.readyState==4){

if(resp.status==200 || resp.status==304){

1.获取接受的文本

resp.responseText;

2.作为html传递只需要将接收到的文本值放到页面中的某个位置即可

}

}

}

Xml

需要新建的文件：

 

 

Xml文件内容：

<?xml version="1.0" encoding="UTF-8"?>

<details>

<name>第一个链接</name>

</details>

步骤：

①　1、2、3步骤同上，只需要在判断状态里面获取的是XML文件，也就是responseXML,

获取xml文件里面的name值可以按照以下方法获取到：

getElementsByTagName("name")[0].firstChild.nodeValue

②　但是不同于html直接在页面上加上接收的文本值，因为这里我们接收的是xml文件，所以我们需要用到添加节点的方法将获取到的值传递到页面上，方法如下：

var node=document.createTextNode(name)

③　再在对应的位置调用appendChild(node)

Json

需要新建的文件：

 

 

json文件中内容：

 

{

"name": "one"

 }

步骤：

①　json对象接收的也是responseText,但是与html文件在页面直接放接收到的值不同，他需要用到eval方法来解析传递的json文件

②　方法如下：

var result=resp.responseText;

var obj=eval("("+result+")")

var name=obj.name;

③　获取到name值之后和xml的后续处理类似，也是需要使用添加节点的方法在页面显示。

用什么技术比较好？

如果应用程序不需要与其他应用程序共享数据，可以使用html技术最简单；

如果需要数据重用，可以使用json，json是开发中用的最多的；

如果远程应用程序未知，可以使用xml；