如下使用Ajax 实现异步请求:(以下html中标签省略...)
<script language="javascript" >
var http_request = false;
function send_request(url,poststr) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
var herf=document.getElementById("tableinfo").value;
$('#tableinfo').val(herf);
var url="http://testservice.bjchs.org.cn:8080/searchjg/index.jhtml?tableinfo="+ $('#tableinfo').val(herf);
http_request.open("get", url, true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(poststr);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
document.getElementById("comment").innerHTML = unescape(xmlhttp.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
}
</script>
现在用Jquery实现相同的操作
1.先下载Jquery.js类库,将其引入
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
首先引用样式有三种ID,Class,标签选择器Jquery中借鉴css理念操作DOM
在文本加载中通常<body οnlοad=""> 等同于Jquery中
$("document").read(function()
{
//操作过程,先加载DOM的事件获得DOM节点指定的ID在ID上绑定相应事件
//read中需捆绑函数,通常函数复用性不大或只加载一次时,直接把函数写入其中无需向之前在html中事件捆绑js 的函数名称
$("#ctype").blur(function(){
var ctype=$(this).val();
//Jquery中自带的回调函数无需自定义
$.post("http://testservice.bjchs.org.cn:8080/searchjg/index.jhtml",{tableinfo:"ctype"},,"text/html")
}
)
}
)
</script>
总结:使用Jquery替换Ajax创建实现html中与JS分离并简化JS操作