jquery与ajax的应用
2016-01-07 21:03
741 查看
1.编写第一个Ajax的例子,先来看一下传统的JavaScript实现的ajax例子。
首先在前台页面中书写HTML代码。
<button>按钮用来出发ajax,id为“resText”的元素用来显示从服务器返回的HTML文本。
接下来的任务就是完成ajax()函数,实现步骤如下:
(1)定义一个函数,通过该函数来异步获取信息,代码如下:
(2) 申明一个空对象用来装入XMLHttpRequest对象,代码如下:
(3) 给XMLHttpRequest对象赋值,代码如下:
(4)实例化成功后,使用open()方法初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器URL,代码如下:
默认情况下,使用XMLHttpRequest对象发送的请求是异步进行的,但是可以显示的把async参数设置为true,如上面代码所示。
(5)因为要做一个异步调用,所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当作他的readyState值改变时调用。当readyState值改变时,会激发一个readystatechange事件,可以使用onreadystatechange属性来注册该回调时间处理器,代码如下:
(6)使用send()方法发送该请求。因为使用get方式提交,所以可以使用null参调用或者不指定参数调用send()方法,代码如下:
当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态值为200)时,就可以调用一个JavaScript函数来处理该响应内容,代码如下:
完整的代码如下:
test.php
首先在前台页面中书写HTML代码。
<input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div>
<button>按钮用来出发ajax,id为“resText”的元素用来显示从服务器返回的HTML文本。
接下来的任务就是完成ajax()函数,实现步骤如下:
(1)定义一个函数,通过该函数来异步获取信息,代码如下:
function Ajax(){ //……………… }
(2) 申明一个空对象用来装入XMLHttpRequest对象,代码如下:
var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
(3) 给XMLHttpRequest对象赋值,代码如下:
if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象 xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest }
(4)实例化成功后,使用open()方法初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器URL,代码如下:
xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式
默认情况下,使用XMLHttpRequest对象发送的请求是异步进行的,但是可以显示的把async参数设置为true,如上面代码所示。
(5)因为要做一个异步调用,所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当作他的readyState值改变时调用。当readyState值改变时,会激发一个readystatechange事件,可以使用onreadystatechange属性来注册该回调时间处理器,代码如下:
xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
(6)使用send()方法发送该请求。因为使用get方式提交,所以可以使用null参调用或者不指定参数调用send()方法,代码如下:
xmlHttpReq.send(null); //因为使用get方式提交,所以可以使用null参调用
当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态值为200)时,就可以调用一个JavaScript函数来处理该响应内容,代码如下:
function RequestCallBack(){//一旦readyState值改变,将会调用这个函数 if(xmlHttpReq.readyState == 4){ if(xmlHttpReq.status == 200){ //将xmlHttpReq.responseText的值赋给ID为 resText 的元素 document.getElementById("resText").innerHTML = xmlHttpReq.responseText; } } }
完整的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){
var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
}
if(xmlHttpReq != null){ //如果对象实例化成功
xmlHttpReq.open("GET","test.php",true); //调用open()方法并采用异步方式
xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
xmlHttpReq.send(null); //因为使用get方式提交,所以可以使用null参调用
}
function RequestCallBack(){//一旦readyState值改变,将会调用这个函数 if(xmlHttpReq.readyState == 4){ if(xmlHttpReq.status == 200){ //将xmlHttpReq.responseText的值赋给ID为 resText 的元素 document.getElementById("resText").innerHTML = xmlHttpReq.responseText; } } }
}
</script>
</head>
<body>
<input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div>
</body>
</html>
test.php
<?php echo "Hello Ajax!"; ?>
相关文章推荐
- jQuery中的height()、innerheight()、outerheight()的区别总结
- 常用正则表达式汇总
- jquery中的$.ajax函数详解
- jquery中开头为什么要有文档就绪函数$(document).ready()
- 写分页时如何用jq获取当前标签文本的值
- jq如何获取文本值、输入值、属性值
- jquery的冒泡和默认行为
- 停止jq中的ajax请求用abort()函数
- Jquery自定义一个带名称的、可以传参数的函数以及setTimeout延迟调用,用法详解
- Jquery的方法(一)
- Zepto
- CSS3+jQuery实现时钟插件
- jquery eval解析JSON中的注意点介绍
- jquery操作select(设置选中值,取选中值)
- jQuery最佳实践
- blueimp/jquery-File-Upload中文文档
- 使用JQuery UI完成可输入内容且自动匹配的的下拉列表
- 使用jquery实现表单点击进入、移出变色效果(三)
- 实例讲解jquery与json的结合
- 使用jquery实现表单点击进入、移出变色效果(二)