JS与JQ与AJAX的使用
2018-03-17 22:17
423 查看
什么是Ajax
Ajax=异步JavaScript和XML 简短的说,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示, 使用AJAX的应用程序案例:谷歌地图,腾讯微博,优酷视频,人人网等等
XMLHttpRequest对象
所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject) XMLHttpRequest用于在后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下, 对网页的某部分进行更新 创建XMLHttpRequest对象 所有现代浏览器(IE7+,Firefox,Chrome,Safari以及Opera)均内建XMLHttpRequest对象 request = new XMLHttpRequest(); IE5和IE6使用ActiveX对象,不支持XMLHttpRequest对象: request = new ActiveXObject("Microsoft.XMLHTTP") 为了响应所有的现代浏览器,包括IE5和IE6,需检查浏览器是否支持XMLHttpRequest对象,如果 支持,则创建XMLHttpRequest对象,如果不支持,就创建ActiveXObject var request; if(window.XMLHttpRequest){ request=new XMLHttpRequest(); }else{ request=new ActiveXObject("Microsoft.XMLHTTP"); }
向服务器发送请求
request.open("GET","test1.txt",true); request.send(); open(method,url,async) 规定请求的类型,url以及是否异步处理请求 method:请求的类型,GET或POST url:文件在服务器上的位置 async:true(同步)或false(异步) send(string) 将请求发送到服务器 当用post请求的时候使用string GET还是POST? 与POST相比,GET更简单也更快,并且在大部分情况下都能用 然而在以下情况下,使用POST 1.无法使用缓存文件(更新服务器上的文件或数据库) 2.向服务器发送大量数据(POST没有数据量限制) 3.发送包含未知字符的用户输入时,POST比GET更稳定可靠 url-服务器上的文件 open()方法的url参数是服务器上文件的地址 request.open("GET","ajax.asp",true); 该文件可以是任何类型的文件,比如.txt和.xml或者服务器脚本文件,比如 .asp和.php(在传回响应之前,能够在服务器上执行任务) 异步 Ture或者False AJAX指的是异步 JavaScript和XML XMLHttp对象如果要用于AJAX的话,其open()方法的async参数必须设置为true 对于web开发人员来说,发送异步请求是一个巨大的进步,很多在服务器执行的任务都相当费时 AJAX出现之前,这可能会引起应用程序挂起或停止 通过AJAX,JavaScript无需等待服务器的响应而是 1.等待服务器响应时执行其他脚本 2.当响应就绪后对响应进行处理 当async=true时,规定在响应处于onreadystatechange事件中的就绪状态时执行函数: request.onreadystatechange=function(){ if(request.readyState==4&&request.status==200){ document.getElementById("myDiv").innerHTML=request.responseText; } } request.open("GET","test1.text",true); request.send(); 不推荐async等于false,但是对于对于一些小型的请求,也是可以的,这时 Javascript会等到服务器响应就绪才会继续执行,如果服务器繁忙或者缓慢,应用 程序会挂起或停止. 注意:当你使用async=false时,不用写onreadystatechange函数,把代码放在send()语句后面即可 request.open(); document.getElementById("myDiv").innerHTML=request.responsetext;
服务器响应
如需获得来自服务器的响应,要使用XMLHttpRequest对象的responseText或responseXML属性 responseText 获得字符串形式的响应数据 responseXML 获得XML形式的响应数据 responseText属性 如果来自服务器的响应并非XML,请使用responseText属性 responseText属性返回字符串形式的响应,因此你可以这样用: document.getElementById("myDiv").innerHTML=request.responseText; responseXML属性 requestDoc=request.responseXML; txt=""; x=requestDoc.getElementsByTagName("ARTIST"); for(int i=0;i<x.length;i++){ txt=txt+x[i].childNodes[0].nodeValue+"<br />" } document.getElementsById("myDiv").innerHTML=txt;
onreadystatechange事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务 每当readyState改变时,就会触发onreadystatechange事件 readyState属性存有XMLHttpRequest的状态信息 onreadystatechange: 存储函数(或函数名),每当readyState改变时,就会调用该函数 readyState: 存有XMLHttpRequest的状态,从0到4变化 0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成,且响应已就绪 status: 200:'OK' 404:未找到页面 在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务 当readyState等于4且状态为200时,表示响应已就绪: request.onreadystatechange=function(){ if(request.readyState==4 && request.status==200){ document.getElementById("myDiv").innerHTML=request.responseText; } } 说明:onreadystatechange事件被触发5次(0-4),对应着readyState的每个变化
js中AJAX完整写法
// 1.创建请求对象 var request = new XMLHttpRequest(); // 2.设置请求并发送 true代表异步 false代表同步 request.open("GET", "text.json", true); request.send(); request.onreadystatechange = function(){ if (request.readyState==4 && request.status==200){ // 请求成功 打印内容 console.log(request.responseText); } }
jq中的AJAX完整写法
$.ajax({ url:"text.json", // 请求目标 type:"GET", // 请求类型 POST(加密) 或者 GET(默认) async:true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步) beforeSend:function(obj){ // 在发送请求之前执行此函数 // 作用:检查一下请求是否是想要的 // 如果return false则取消发送 console.log(obj); // return false; }, cache:true, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 // 可以把success里面的this 改变指向 context:document.getElementsByTagName('body')[0], success:function(res){ //console.log(this); //console.log(res); this.innerHTML += res; } })
相关文章推荐
- Ajax、json,原生JS和JQ使用Ajax
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定
- ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧
- ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧
- 使用AJAX动态加栽JS脚本和CSS样式
- 使用AJAX UpdatePanal,JS不能跳出解决方案
- [转]prototype.js开发笔记(针对Ajax的JS框架Prototype的使用介绍)
- Prototype使用学习手册指南之ajax.js
- ajax拖动层,保存层位置,这段代码是从网络人扒拉下来的(非XAJAX),使用类库prototype.js,感觉效果非常好
- 解决AJAX中使用UpdatePanel后无法弹出js对话框问题(引)
- ajax拖动层,保存层位置,这段代码是从网络人扒拉下来的(非XAJAX),使用类库prototype.js,感觉效果非常好
- js操作cookie;js的setInterval;C#获取指定页面的内容;Ajax.dll的使用
- 使用AjaxPro,js调用后台方法
- 使用MagicAjax 服务器出现unable to find script library'/ajaxcallobject.js
- 使用prototype.js来开发AJAX
- asp.net ajax1.0 使用js调用webSerivce
- ajax拖动层,保存层位置,这段代码是从网络人扒拉下来的(非XAJAX),使用类库prototype.js,感觉效果非常好
- prototype.js ,ajax部分使用例子
- 在AJAX中使用 JS
- JST+JSON+AJAX——使用客户端js模版代替服务端数据绑定