Ajax 基础整理
2015-06-17 08:51
246 查看
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
AJAX基础:XMLHttpRequest (IE5 和 IE6使用ActiveXObject) —用于在后台和服务器交换数据。
创建对象:
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() 方法
xmlhttp.open("GET","test1.txt",true); //规定请求的类型、URL、是否异步处理请求
xmlhttp.send(); //将请求发送到服务器 send(string),string:仅用于post请求
GET更简单也更快,所以大部分情况下都使用GET请求。
使用 POST 请求情况:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数量限制)
- 发送包含未知字符的用户输入时, POST 比 GET 更稳定也更可靠
服务器响应:
responseText(获得字符串形式的响应数据)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML(来自服务器的响应时XML,需作为XML对象进行解析)
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
onreadystatechange 事件:
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务
xmlhttp.<span style="color:#993300;">onreadystatechange</span>=function()
{
if (xmlhttp.<span style="color:#993300;">readyState</span>==4 && xmlhttp.<span style="color:#993300;">status</span>==200) //表示响应就绪
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
实例解析 showHint() 函数:
function showHint(str)
{
var xmlhttp;
if (str.length==0) //若输入框为空,则该函数清空 txtHint 占位符的内容
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
AJAX基础:XMLHttpRequest (IE5 和 IE6使用ActiveXObject) —用于在后台和服务器交换数据。
创建对象:
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() 方法
xmlhttp.open("GET","test1.txt",true); //规定请求的类型、URL、是否异步处理请求
xmlhttp.send(); //将请求发送到服务器 send(string),string:仅用于post请求
GET更简单也更快,所以大部分情况下都使用GET请求。
使用 POST 请求情况:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数量限制)
- 发送包含未知字符的用户输入时, POST 比 GET 更稳定也更可靠
服务器响应:
responseText(获得字符串形式的响应数据)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML(来自服务器的响应时XML,需作为XML对象进行解析)
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
onreadystatechange 事件:
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务
xmlhttp.<span style="color:#993300;">onreadystatechange</span>=function()
{
if (xmlhttp.<span style="color:#993300;">readyState</span>==4 && xmlhttp.<span style="color:#993300;">status</span>==200) //表示响应就绪
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
实例解析 showHint() 函数:
function showHint(str)
{
var xmlhttp;
if (str.length==0) //若输入框为空,则该函数清空 txtHint 占位符的内容
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
相关文章推荐
- 通过VNC连接到虚拟机上
- 在ubuntu 14.04 64bit下配置安装PyQt4(python2.7和python3.4)
- 2015-06-17开始每天做记录,谨记
- IE7、IE8不兼容问题,TR下边框不显示
- weblogic 9.2线程数调整的三个方法
- QCOW2和ROW的区别
- chrome新版不支持旺旺 支付宝 插件的解决方法
- 怎样从SQL Server2008升级到SQL Server 2008 r2
- Android学习【按钮监听】
- 第十五周阅读程序二
- zookeeper工作原理、安装配置、工具命令简介
- mysql:user表
- 《涂抹MySQL》目录
- tomcat支持多少并发
- weblogic9线程数调整
- checking for updated SDK components (AndroidStudio第一次启动一直进不去)
- 怎么创建health bar 使用 uGUI
- 英语词典
- 网站接入支付宝实例教程
- 我自己的Android面试试题总结整理