ajax入门教程之XMLHttpRequest与$.ajax使用说明-百分百源码网

ajax入门教程之XMLHttpRequest与$.ajax使用说明

发布时间：01/15 来源：浏览：关键词：

在js中使用ajax有两种常用的方法，最初使用的是原生态的XMLHttpRequest写法，还有一种就是现在流行Jquery ajax 用法，下面我来分别介绍一下。

对于Ajax，最核心的一个对象是XMLHttpRequest，所有的Ajax操作都离不开对这个对象的操作。
创建XMLHttpRequest对象
对于IE浏览器：

代码如下
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');

对于其他浏览器：

代码如下
xmlHttp = new XMLHttpRequest();

不同的浏览器对javascript中的XMLHttpRequest对象的支持是不一样的，所以需要根据情况做一下判断。

XMLHttpRequest对象相关方法

打开请求

XMLHttpRequest.open(传递方式,地址,是否异步请求)

准备就绪执行

XMLHttpRequest.onreadystatechange

获取执行结果

XMLHttpRequest.responseText

一个简单的php+Ajax的例子：
首先是test.js文件：

代码如下

var xmlHttp;
function S_xmlhttprequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function php100(url){
S_xmlhttprequest();
xmlHttp.open("GET","do.php?id="+url,true);
xmlHttp.onreadystatechange=byphp;
xmlHttp.send(null);
}
function byphp(){
var byphp100=xmlHttp.responseText;
document.getElementById('php100').innerHTML=byphp100;
}

然后是执行php操作的文件，do.php

代码如下
<?PHP $id=@$_GET[id]; for($i=1;$i<10;$i++){ echo $id; }

然后是前端显示页面，test.html

代码如下
<script src="test.js" type="text/javascript"></script> <a href="#" onClick="php100(1)">1</a> \|\| <a href="#" onClick="php100(2)">2</a> \|\| <a href="#" onClick="php100(3)">3</a> <div id="php100"></div>

jQuery ajax中数据以键值对（Key/Value）的形式发送到服务器，使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对（key1=value1&key2=value2…）后提交。serialize() 方法使用标准的 URL-encoded 编码表示文本字符串。下面是使用serialize()序列化表单的实例：

jQuery ajax原型：

代码如下
$.ajax({ type: "POST", url: ajaxCallUrl, data: "Key=Value&Key2=Value2", success: function(msg){alert(msg);} });

ajax serialize():

代码如下
$.ajax({ type: "POST", url:ajaxCallUrl, data:$('#formID').serialize(),// 要提交的表单 success: function(msg) {alert(msg);} });

serialize()序列化表单实例：

代码如下