AJAX详解
来源：互联网 发布：航天税务软件下载 编辑：程序博客网 时间：2024/06/05 04:50
aJax:允许浏览器与服务器之间通信而无需刷新当前页面的技术。服务端语言：服务器需要具备向浏览器发送特定信息的能力，aJax与服务器语言无关XML：可扩展标记语言：是一种描述数据的个数，Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息，一般选用XML使用JavaScript绑定和处理所有的数据使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取DOM：实现动态显示和交互XHTML：标准化呈现核心：XMLHttpRequest对象 是JavaScript的一个扩展，可以使网页和服务器之间进行数据交互，它是一种异步请求技术，通过XMLHttpRequestrian可以使JavaScript向服务器提出请求并处理响应，而不阻塞用户。 aJax:是异步的JavaScript对象和XML，利用JavaScript语言向服务器发送异步请求，响应后的数据是XML格式（一般都是json） aJax最大特点：可以异步请求，刷新局部代码 <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .tr0{ background-color: red; } .tr1{ background-color: green; } </style></head><body><table id="person_table"></table><!--加载数据按钮--><input type="button" value="加载数据" onclick="loadDate();"/><!--显示人的信息表格--><table id="person_table1" style="border: 1px" border="1px"> <tr> <th>姓名</th> <th>年龄</th> <th>学号</th> </tr></table></body><script type="text/javascript"> //加载数据 function loadDate() { /*aJax开发步骤*/ 1.创建请求对象 var xhr; try{ //正常浏览器 xhr=new XMLHttpRequest(); }catch(e){ //IE6 try { xhr=new ActiveXObject("Msxml2.XMLhttp"); //IE5或之前 }catch(e){ xhr=new ActiveXObject("Microsoft.XMLHTTP"); } }//2.打开和服务器之间的连接// xhr.open("GET","http://10.0.163.168:5500"); xhr.open("GET","json文件/a.json",true); //3.发送请求 xhr.send(); //4.接受服务器的响应 xhr.onreadystatechange=function () { //需要判断，请求对象的状态码为4，服务器响应的状态码为200的时候，在使用 if(xhr.readyState==4&&xhr.status==200){ //返回数据 xhr.responseText;//返回的是json格式的字符串，我们需要将其转换为JavaScript中的字面量对象 var jsObj=JSON.parse(xhr.responseText); //刷新UI（动态的创建表格，插入请求的数据） //得到表格 var table=document.getElementById("person_table"); //遍历jsObj（是一个数组） for(var tempPersonIdx in jsObj){ //获取每一个人的对象 var tempPerson=jsObj[tempPersonIdx]; //创建tr标签 var tr=document.createElement("tr"); //给tr添加class属性，给奇偶行设置背景颜色 tr.setAttribute("class","tr"+tempPersonIdx%2); //遍历人对象的属性 for(var tempPersonPro in tempPerson){ //创建节点td var td=document.createElement("td"); //创建文本节点 var tdValue=document.createTextNode(tempPerson[tempPersonPro]); //为td添加文本节点 td.appendChild(tdValue); //为tr添加td tr.appendChild(td); } //为table添加tr table.appendChild(tr); } } } }</script></html>AJAX的编程步骤： 1.创建请求对象： 创建核心的XMLHttpReuest请求对象，AJAX编程都是利用JavaScript这个请求对象进行编程 注意： XMLHttpRequest请求对象，对浏览器的支持是不一样 1.1大部分主流的浏览器都支持XMLHttpRequest对象 var xhr=new XMLHTTPRequest(); 1.2.IE6 xhr=new ActiveXObject("Msxml2.XMLhttp"); 1.3.IE5以及更早 xhr=new ActiveXObject("Microsoft.XMLHTTP"); 2.打开与服务器的连接创建请求对象后，调用请求对象的open()方法：该方法可以和服务器之间连接open(method,url,async); metheod:请求方式：GET和POST URL：要请求服务器的路径，如果用的是GET请求，那么参数就添加在URL后面 async:表示用的是异步请求还是同步请求，默认是异步 3.发送请求： 请求对象调用open（）方法打开连接后，利用请求的对象调用send()方法，发送请求 如果你用的是GET方式请求，send（）方法的参数为空或者写null 如果是POST方式请求，那么请求参数会放到里面4.接受服务器的响应当请求对象调用完send()方法后，就可以等待服务器响应，请求对象有一个onreadystatechange事件，这个事件会根据请求的对象的状态而触发 请求对象的5种状态（状态码） 0：表示初始化未完成，只是创建了XMLHTTPRequest请求对象，还未调用open（）方法 1：请求开始，开始调用open()方法，但还没有调用send()方法 2：请求发出，说明已经调用send()方法 3：开始接受服务器的响应 4：读取服务器的响应（响应彻底结束）注意：调用onreadystatechange事件会在状态码为2/3/4的时候触发，在开发时，一般只关心状态码为4的时候服务器的响应码： 200：响应正常 404：找不到要访问的页面 500：服务器端页面异常 例如：导航 1.定义一个HTML文件 <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> </style> <script type="text/javascript" src="../js/a.js"></script> <script type="text/javascript" src="../js/b.js"></script></head><body><input type="button" value="加载数据" id="load_btn"/><br/><br/><table id="out_table" border="1px"> <!-- <tr> <td> <table> <thead>A</thead> <tr> <td>奥迪</td> </tr> <tr> <td>阿斯顿</td> </tr> </table> </td> </tr>--></table></body><script type="text/javascript">//通过工具类。给window添加load事件 b.addHandler(window,"load",function () { //执行完onload事件，给button添加单击事件 b.addHandler($("load_btn"),"click",function () { //点击按妞通过AJAX来异步请求加载数据// ajaxFn("GET","../js/car.json",null,function () {// //这么写是可以// }),function () {// //请求失败// } //调用AJAX异步请求 ajaxFn("GET","../js/car.json",null,successCallBackFn,failCallBackFn); }); });//AJAX返回函数成功 function successCallBackFn(returnValue) { //把JSON字符串转换成js对象 var rootObj=JSON.parse(returnValue); //得到listcntents数组 var listContentArray=rootObj.listContents; //获取外层的table var outTable=$("out_table"); //遍历listContentArray数组 for(var tempListContentIdx in listContentArray){ //得到每一个ListContent对象 var tempListContent=listContentArray[tempListContentIdx]; //创建外层tr var outTr=createElement("tr"); //创建外层的td var outTd=createElement("td"); //创建内层的Table var inTable=createElement("table"); //创建内层thread var inthead=createElement("thead"); //创建内层的thead的textNode var inTheadValue=createTextNode(tempListContent.PinYin); //添加TExtNode inTable.appendChild(inTheadValue); //添加inthread inTable.appendChild(inthead);//添加inTable outTd.appendChild(inTable); outTr.appendChild(outTd); outTable.appendChild(outTr);//创建内部的tr和td //得到carArray 的数组 var carArray=tempListContent.GroupInfo; //遍历数组 for(var tempCarIdx in carArray){ //得到每一个car对象 var tempCar=carArray[tempCarIdx]; //创建tr var inTr=createElement("tr"); //创建td var inTd=createElement("td"); //在创建内部的td的textNode var inTdValue=createTextNode(tempCar.MainBrandName); //添加textNode inTd.appendChild(inTdValue); inTr.appendChild(inTd); inTable.appendChild(inTr); } } }//AJAX返回失败的函数 function failCallBackFn(returnValue) { alert(returnValue); }//封装通过ID获取标签元素 function $(idValue) { return document.getElementById(idValue); } //封装创建元素的方法 function createElement(elementName) { return document.createElement(elementName); }//封装创建TextNode function createTextNode(elementValue) { return document.createTextNode(elementValue); }</script></html>2.定义AJAX工具类/** 封装AJAX* method：请求方式* URL：请求路径* date：参数* successCallBackFn:响应成功回调函数* failCallBackFn:响应失败回调函数*** */function ajaxFn(method,url,data,successCallBackFn,failCallBackFn) { var xhr; //创建请求对象 if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else if(window.ActiveXObject){ var vesions=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0;i<vesions.length;i++){ try{ xhr=new ActiveXObject(vesions[i]); break; }catch(e){ console.log(e); } } }else{ //创建一个错误的对象 //throw去主动抛出一个异常错误 throw new Error("浏览器不支持AJAX"); }//打开连接和发送请求 if(method=="GET"||method=="get"){ //利用AJAXGET请求会有缓存，为了避免每一次访问的路径不一样，可以在URL后面加随机数 //随机数可以通过Math.random()解决 xhr.open(method,url+"?"+data+Math.random(),true); xhr.send(null); }else if(method=="POST"||method=="post"){ xhr.open(method,url,true); //post请求需要设置请求头 xhr.setRequestHeader("content-type","application/x-www-form-urlencodeed"); //发送请求 xhr.send(data); }else { console.log("请求方式不正确！"); }//请求响应结果 xhr.onreadystatechange=function () { if(xhr.readyState==4){ if(xhr.status==200){ //调用回调函数 successCallBackFn(xhr.responseText); }else{ //失败 failCallBackFn("失败！"); } } }return xhr;}3.定义事件工具类/* * 事件封装工具 */var EventUtil = { //添加事件的方法 /* * element: 给"谁"(某个元素)添加事件 * eventType: 事件类型 * handler: 具体实现函数 */ addHandler : function (element, eventType, handler) { //三种实现 if (window.addEventListener) { //IE9及IE9以上 element.addEventListener(eventType, handler); } else if (window.attachEvent) { //IE8及IE8以下实现 //attachEvent需要的事件类型 需要 加上 on element.attachEvent("on" + eventType, handler); } else { //通过中括号访问属性的语法才可以 element["on" + eventType] = handler; } }, removeHandler : function (element, eventType, handler) { if (window.removeEventListener) { element.removeEventListener(eventType, handler); } else if (window.detachEvent) { element.detachEvent("on" + eventType, handler); } else { element["on" + eventType] = null; } }}
阅读全文
0 0
- ajax开发：ajax详解
- ajax 详解
- Ajax详解
- ajax详解
- ajax详解
- Ajax详解
- AJAX 详解
- Ajax详解
- ajax 详解
- AJAX详解
- AJAX详解
- Ajax详解
- AJAX详解
- Ajax详解
- AJAX详解
- ajax详解
- Ajax详解
- AJAX详解
- list_add_tail 双向链表实现分析
- 浏览器对象(1)
- latex footnote numbering
- 循环遍历输出数组
- [LeetCode]643. Maximum Average Subarray I
- AJAX详解
- Android Hook神器——XPosed入门（登陆劫持演示）
- 安卓学习笔记之ViewPager
- strcpy和strncpy的模拟实现
- 第19节－认识 BASH 这个 Shell
- js中的DOM
- Ubuntu通过修改配置文件进行网络配置
- 常用的命令行工具安装
- 02. JSP 基本语法
