ajax基础(1)

2016-11-29 19:19:26来源:CSDN作者:Qiufeng_0ng人点击

第七城市
  1. 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
    responseText 获得字符串形式的响应数据。
    responseXML 获得 XML 形式的响应数据。
//将服务器响应内容显示到指定id处document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  1. onreadystatechange 事件
    当请求被发送到服务器时,我们需要执行一些基于响应的任务。
    每当 readyState 改变时,就会触发 onreadystatechange 事件。
    readyState 属性存有 XMLHttpRequest 的状态信息。
    下面是 XMLHttpRequest 对象的三个重要的属性:
    onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
    readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
    status 200: “OK”
    404: 未找到页面

当 readyState 等于 4 且状态为 200 时,表示服务器处理已完成并且响应已就绪:
相关代码:

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }
  1. 在输入框输入字符串时可以发送ajax请求,实时给出输入提示
<input type="text" id="txt1" onkeyup="showHint(this.value)" />function showHint(str){var xmlhttp;if (str.length==0)  {   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","/ajax/gethint.asp?q="+str,true);xmlhttp.send();}

4.根据下拉框选项实时更新内容,使用的触发函数是

<select name="customers" onchange="showCustomer(this.value)" xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true); //创建一个新的http请求,并指定此请求的方法、URL以及验证信息xmlhttp.send();//可以调用send方法向服务器发送数据

5.解决为不同浏览器创建不同的 XMLHTTP 对象的问题

function GetXmlHttpObject(){  var xmlHttp=null;  try    {    // Firefox, Opera 8.0+, Safari    xmlHttp=new XMLHttpRequest();    }  catch (e)    {    // Internet Explorer    try      {      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      }    catch (e)      {      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");      }    }  return xmlHttp;}function showHint(str)//根据输入框内容进行提示的函数{  if (str.length==0)    {     document.getElementById("txtHint").innerHTML="";    return;    }  xmlHttp=GetXmlHttpObject()  if (xmlHttp==null)    {    alert ("您的浏览器不支持AJAX!");    return;    }var url="gethint.asp";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}function stateChanged() //状态改变触发的函数{   if (xmlHttp.readyState==4)  {   document.getElementById("txtHint").innerHTML=xmlHttp.responseText;  }}

以上内容来自http://www.w3school.com.cn/example/ajax_examples.asp 的总结

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台