网站幕布拍照什么样子的,淘宝网站制作培训,成品网站货源入口,酒店网站建设报告书1 Ajax是什么 1.1 Asynchronous JavaScript and XML#xff08;异步的javascript和xml#xff09; 实质为#xff1a;使用浏览器内置的一个对象#xff08;XmlHttpRequest#xff09;向服务器发送请求#xff0c;服务器返回xml数据或文本数据给浏览器#xff0c;然后在浏…1 Ajax是什么 1.1 Asynchronous JavaScript and XML异步的javascript和xml 实质为使用浏览器内置的一个对象XmlHttpRequest向服务器发送请求服务器返回xml数据或文本数据给浏览器然后在浏览器端使用这些数据更新部分页面在整个过程中页面无任何刷新。 1.2 传统的等待—响应—等待 在传统的web应用中比如注册用户填写整个注册表单后提交此时浏览器会将整个注册页面抛弃等待服务器返回一个新的完整的页面。在等待过程中用户不能够做其他操作。服务器生成新的页面发送给浏览器浏览器需要重新解析这个页面生成相应的页面。 1.3 图示 ① Ajax引擎即XmlHttpRequest对象首先为该对象注册一个监听器该监听器是一个事件处理函数对状态改变事件readyStatechange进行监听 ② 当用户对GUI做了某种操作将产生对应的事件如焦点失去事件等 ③ 一旦产生对应的事件将触发事件处理代码 ④ 在执行事件处理代码时会调用Ajax引擎XmlHttpRequest对象 ⑤ 发送请求Ajax引擎被调用后将独自向服务器发送请求独立于浏览器之外 继续其他操作在Ajax引擎发送请求的同时用户在浏览器还可以对GUI继续做其他操作该请求是异步请求Ajax引擎发送请求时没有打断用户的操作 ⑥ 服务器的web组件对请求进行处理 ⑦ 服务器可能会调用到数据库或者处理业务逻辑的Java类 ⑧ 服务器将处理结果响应给只返回部分数据可以是xml或者文本Ajax引擎 ⑨ 监听器通过Ajax引擎获取响应数据xml或者文本 ⑩ 监听器对GUI中的数据进行更新局部更新不是整个页面刷新 整个过程中大部分是通过JS实现的响应数据可能是xml所以Ajax可以看做是多种技术的融合。 2 Ajax编程 第一步 获得XmlHttpRequest对象 该对象由浏览器提供但是该类型并没有标准化。 ie和其他浏览器不同其他浏览器都支持该类型而ie不支持。 function getXmlHttpRequest(){var xhr null;if((typeof XMLHttpRequest) ! undefined){xhr new XMLHttpRequest();}else{xhr new ActiceXObject(Microsoft.XMLHttp);}return xhr;} 第二步 使用XmlHttpRequest向服务器发请求 a. 发送get请求 function change(v1) {var xhr getXmlHttpRequest();/*open(请求方式请求地址同步/异步)请求方式get/post请求地址如果是get请求请求参数添加到地址之后比如 get_comments.do?nameQQ同步/异步true表示异步*/xhr.open(get, encodeURI(get_comments.do?name v1), true);/*注册一个监听器即当xhr的状态发生改变产生了readystatechange事件该事件会由一个函数f1来进行处理这个函数里需要获得服务器返回的数据然后更新页面*/xhr.onreadystatechange f1;/*只有调用send方法之后请求才会真正发送*/xhr.send(null);} b. 发送post请求 function change2(v1){var xhr getXmlHttpRequest();xhr.open(post,get_comments.do,true);//必须添加一个消息头 content-typexhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);xhr.onreadystatechange f1;xhr.send(name v1);} 第三步 在服务器端处理请求 第四步 在监听器当中处理服务器返回的响应 xhr.onreadystatechange f1;function f1(){if(xhr.readyState 4){var txt xhr.responseText;document.getElementById(d1).innerHTML txt;}} 或者 xhr.onreadystatechange function(){//编写相应的处理代码if(xhr.readyState 4){//只有readyState等于4xhr才完整地接收到了服务器返回的数据//获得文本数据var txt xhr.responseText;//获得一个xml dom 对象var xml xhr.responseXML;//dom操作 更新页面document.getElementById(d1).innerHTML txt;}} 关于Ajax的其他应用可以参考网盘文件。 1关于get请求中ie浏览器的缓存功能使得并非每一次触发事件都发起请求的问题的解决 2关于get请求和post请求中包含中文时的编码问题解决等。转载于:https://www.cnblogs.com/hnini/p/6065023.html
