码迷,mamicode.com
首页 > Web开发 > 详细

AJAX

时间:2014-10-11 03:11:44      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   使用   ar   java   

原生AJAX--XMLHttpRequest对象

1、创建对象 

1 var xmlhttp;
2 if (window.XMLHttpRequest)
3   {// code for IE7+, Firefox, Chrome, Opera, Safari
4   xmlhttp=new XMLHttpRequest();
5   }
6 else
7   {// code for IE6, IE5
8   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
9   }

 

2、向服务器发送请求

使用XMLHTTPRequest对象的open()和send()方法。

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

 

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

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

例子:

open()得第三个参数用于设置是否为异步,true为异步。如果为false,则达不到异步效果。

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); //添加?后面的随机数是为了避免得到缓存结果
xmlhttp.send();

 

3、服务器响应

使用XMLHttpRequest对象的responseText(字符串类型的响应)或responseXML(XML类型的响应)属性。

xmlDoc=xmlhttp.responseXML;

 

4、readyState事件

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

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

 

onreadystatechange:存储函数, 当readyState属性改变时,会调用该函数

readyState:

0:请求未初始化

1:服务器连接已建立

2:请求已处理

3:请求处理中

4、请求已完成,且响应已就绪

status:

200: "OK"

404: 未找到页面

5、例子--根据输入框的输入显示提示

<html>
<head>
<script type="text/javascript">

var xmlHttp=null;

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
try
  {// Firefox, Opera 8.0+, Safari, IE7
  xmlHttp=new XMLHttpRequest();
  }
catch(e)
  {// Old IE
  try
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  catch(e)
    {
    alert ("Your browser does not support XMLHTTP!");
    return;  
    }
  }
var url="/ajax/gethint.asp?q=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
</script> 
</head>
<body><form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>

 


 

JQuery--AJAX

1、$.ajax()

可以DIY一堆参数,是最全的一个ajax.可以不带参数直接使用。返回的是XMLHttpRequest对象。

 例子:

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

 

2、$.post()

$.ajax({
  type: ‘POST‘,
  url: url,
  data: data,  //规定连同请求发送到服务器的数据
  success: success(data, textStatus, jqXHR), //用于定义callback function
  dataType: dataType //默认执行智能判断(xml、json、script 或 html)
});

 

例子:

$.post("test.php", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

 

AJAX

标签:style   blog   http   color   io   os   使用   ar   java   

原文地址:http://www.cnblogs.com/hemi/p/4018152.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!