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

时间：2013-07-24 编辑：简简单单来源：一聚教程网

对于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

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

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

代码如下

复制代码

1 ||
2 ||
3

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()序列化表单实例：

代码如下

复制代码

姓名
职位

提示

个人更推荐大家做jquery ajax哦，这个不介兼容好并且有各种函数支持如load,post,get,getjson,getscript都可以快速实现ajax加载了。

上一个： jQuery的鼠标悬停时放大图片的效果制作
下一个： jQuery Address全站 AJAX 完整案例详解

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程