AJAX

chuangqingchuang7571

于 2014-09-12 21:34:00 发布

阅读量68

点赞数

文章标签： javascript json xhtml ViewUI

原文链接：https://my.oschina.net/u/1865859/blog/313085

版权

最近需要使用ajax，json传数据，快速学习了下ajax，把基本的东西拿出来分享一下，打算以问题的形式来进行文章的编写~go！

（一）什么是Ajax？

Ajax是一种无需加载整个网页，快速刷新局部网页的技术。Ajax不是新的编程语言，而是一些老技术的融合。

（二）Ajax用到了什么技术？

异步数据获取技术：使用XMLHttpRequest

基于标准的表示技术（即静态页）：使用XHTML和CSS

动态显示和交互技术：使用Document Object Model(DOM)

数据互换和操作技术：使用XML与XSLT，现在流行的还有JSON

javascript：作为胶水语言将上述技术融合在一起

基本上也可以说，Ajax全是用javascript编写的~~

（三）什么是XMLHttpRequest？

XMLHttpRequest对象是Ajax的核心，现在的浏览器都支持这个对象，XMLHttpRequest对象用于在后台与服务器交换数据

（四）如何XMLHttpRequest对象？

对应于不同的浏览器，有不同的创建方法。

现在的浏览器，都可通过

[javascript] view plain copy print ?

var xmlhttp = new XMLHttpRequest();

 var xmlhttp = new XMLHttpRequest();

来创建XMLHttpRequest对象~！

而对于IE5，IE6等老版本浏览器，则使用

[javascript] view plain copy print ?

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

来创建~

下面这串代码是一个通用的解决办法，可以满足根据不同浏览器调用不同的XMLHttpRequest对象

[javascript] view plain copy print ?

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

 var xmlhttp;
	if (window.XMLHttpRequest)
 	 {// code for IE7+, Firefox, Chrome, Opera, Safari
 	 xmlhttp=new XMLHttpRequest();
  	}
	else
  	{// code for IE6, IE5
 	 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 	 }

(五）如何向服务器发送请求？

通过XMLHttpRequest对象的open（）方法和send（）方法，即可向服务器发送请求

open(method,url,async)方法，

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)方法

string：仅用于 POST 请求

先看看get请求~

[javascript] view plain copy print ?

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

 xmlhttp.open("GET","demo_get.asp",true); 
	xmlhttp.send();

再看看POST请求~

[javascript] view plain copy print ?

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

 xmlhttp.open("POST","demo_post.asp",true);
	xmlhttp.send();

其实两者差不多对吧？POST是可以传递数据的，怎么传?

[javascript] view plain copy print ?

xmlhttp.open("POST","ajax.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=steven&lname=Jobs");

 xmlhttp.open("POST","ajax.jsp",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send("fname=steven&lname=Jobs");

异步传输async参数请填写true~

（六）POST和GET有什么不同？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET其实并不常用，因为GET属于明文传输，不安全~

（七）怎么接受服务器的响应？

只需要使用到XMLHttpRequest的两个属性，分别是responseText和responseXML

看名字就知道，他们分别对应的是普通文本和 XML文件~

代码如下，只需替换最后的responseText为responseXML即可接受并解析XML文件~

[javascript] view plain copy print ?

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

（八）关于回调函数onreadystatechange是怎么回事“

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

readyState的5种状态：

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

[javascript] view plain copy print ?

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

xmlhttp.onreadystatechange=function()
 	 {
 	 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   	 {
   	 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   	 }
 	}

转载于:https://my.oschina.net/u/1865859/blog/313085