AJAX

原生AJAX--XMLHttpRequest对象

http://www.w3cfuns.com/forum.php?mod=viewthread&tid=1955&extra=page%3D1%26filter%3Dtypeid%26typeid%3D177%26typeid%3D177 w3cfun

JS跨域：http://www.cnblogs.com/2050/p/3191744.html

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);
   });

 

 posted on 2014-10-11 00:18  喵喵喵  阅读(335)  评论(0)  编辑  收藏  举报