当前位置: 代码迷 >> Ajax >> Jquery复建Ajax总结
  详细解决方案

Jquery复建Ajax总结

热度:1045   发布时间:2013-01-23 10:44:49.0
Jquery重构Ajax总结

如下使用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 onload=""> 等同于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操作

  相关解决方案