Ajax JSON介绍

54312568

贡献于2016-01-28

字数:0 关键词: JSON

AJAX AJAX 概述 1 什么是 AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步 Javascript 和 XML”。即使用 Javascript 语言与服务器进行异步交互,传输的数据为 XML(当然,传输的数据不只是 XML)。 AJAX 还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷 新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。  与服务器异步交互;  浏览器页面局部刷新; 2. 同步交互与异步交互  同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;  异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。 3. AJAX 常见应用情景 当我们在百度中输入“博创”字后,会马上出现一个下拉列表!列表中显示的是包含“博创” 的关键字。 其实这里就使用了 AJAX 技术!当文件框发生了输入变化时,浏览器会使用 AJAX 技术向服务器 发送一个请求,查询包含“博创”的关键字,然后服务器会把查询到的结果响应给浏览器,最后浏 览器把关键字显示在下拉列表中。  整个过程中页面没有刷新,只是刷新页面中的局部位置而已!  当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应! 当输入用户名后,把光标移动到其他表单项上时,浏览器会使用 AJAX 技术向服务器发出请求, 服务器会查询名为 zhangSan 的用户是否存在,最终服务器返回 true 表示名为 zhangSan 的用户已经 存在了,浏览器在得到结果后显示“用户名已被注册!”。  整个过程中页面没有刷新,只是局部刷新了;  在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作; 4 AJAX 的优缺点 优点:  AJAX 使用 Javascript 技术向服务器发送异步请求;  AJAX 无须刷新整个页面;  因为服务器响应内容不再是整个页面,而是页面中的局部,所以 AJAX 性能高; 缺点:  AJAX 并不适合所有场景,很多时候还是要使用同步交互;  AJAX 虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增 大;  因为 AJAX 是在浏览器中使用 Javascript 技术完成的,所以还需要处理浏览器兼容性问题; AJAX 技术 1 AJAX 第一例 1.1 准备工作 因为 AJAX 也需要请求服务器,异步请求也是请求服务器,所以我们需要先写好服务器端代码, 即编写一个 Servlet! 这里,Servlet 很简单,只需要输出“Hello AJAX!”。 public class AServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("Hello AJAX!"); response.getWriter().print("Hello AJAX!"); } } 1.2 AJAX 核心(XMLHttpRequest) 其实 AJAX 就是在 Javascript 中多添加了一个对象:XMLHttpRequest 对象。所有的异步交互都是 使用 XMLHttpRequest 对象完成的。也就是说,我们只需要学习一个 Javascript 的新对象即可。 注意,各个浏览器对 XMLHttpRequest 的支持也是不同的!大多数浏览器都支持 DOM2 规范,都 可以使用:var xmlHttp = new XMLHttpRequest()来创建对象;但 IE 有所不同,IE5.5 以及更早版本需 要:var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)来创建对象;而 IE6 中需要:var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)来创建对象;而 IE7 以及更新版本也支持 DOM2 规范。 为了处理浏览器兼容问题,给出下面方法来创建 XMLHttpRequest 对象: function createXMLHttpRequest() { var xmlHttp; // 适用于大多数浏览器,以及IE7和IE更高版本 try{ xmlHttp = new XMLHttpRequest(); } catch (e) { // 适用于IE6 try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { // 适用于IE5.5,以及IE更早版本 try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; } 1.3 打开与服务器的连接(open 方法) 当得到 XMLHttpRequest 对象后,就可以调用该对象的 open()方法打开与服务器的连接了。open() 方法的参数如下: open(method, url, async):  method:请求方式,通常为 GET 或 POST;  url:请求的服务器地址,例如:/ajaxdemo1/AServlet,若为 GET 请求,还可以在 URL 后追 加参数;  async:这个参数可以不给,默认值为 true,表示异步请求; var xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET","/ajaxdemo1/AServlet", true); 1.4 发送请求 当使用 open 打开连接后,就可以调用 XMLHttpRequest 对象的 send()方法发送请求了。send()方 法的参数为 POST 请求参数,即对应 HTTP 协议的请求体内容,若是 GET 请求,需要在 URL 后连接参 数。 注意:若没有参数,需要给出 null 为参数!若不给出 null 为参数,可能会导致 FireFox 浏览器不 能正常发送请求! xmlHttp.send(null); 1.5 接收服务器响应 当请求发送出去后,服务器端 Servlet 就开始执行了,但服务器端的响应还没有接收到。接下来 我们来接收服务器的响应。 XMLHttpRequest 对象有一个 onreadystatechange 事件,它会在 XMLHttpRequest 对象的状态发生 变化时被调用。下面介绍一下 XMLHttpRequest 对象的 5 种状态:  0:初始化未完成状态,只是创建了 XMLHttpRequest 对象,还未调用 open()方法;  1:请求已开始,open()方法已调用,但还没调用 send()方法;  2:请求发送完成状态,send()方法已调用;  3:开始读取服务器响应;  4:读取服务器响应结束。 onreadystatechange 事件会在状态为 1、2、3、4 时引发。 下面代码会被执行四次!对应 XMLHttpRequest 的四种状态! xmlHttp.onreadystatechange = function(){ alert('hello'); }; 但通常我们只关心最后一种状态,即读取服务器响应结束时,客户端才会做出改变。我们可以 通过 XMLHttpRequest 对象的 readyState 属性来得到 XMLHttpRequest 对象的状态。 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4) { alert('hello'); } }; 其实我们还要关心服务器响应的状态码是否为 200,其服务器响应为 404,或 500,那么就表示 请求失败了。我们可以通过 XMLHttpRequest 对象的 status 属性得到服务器的状态码。 最后,我们还需要获取到服务器响应的内容,可以通过 XMLHttpRequest 对象的 responseText 得 到服务器响应内容。 xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert(xmlHttp.responseText); } }; 1.6 AJAX 第一例小结  创建 XMLHttpRequest 对象;  调用 open()方法打开与服务器的连接;  调用 send()方法发送请求;  为 XMLHttpRequest 对象指定 onreadystatechange 事件函数,这个函数会在 XMLHttpRequest 的 1、2、3、4,四种状态时被调用; XMLHttpRequest 对象的 5 种状态:  0:初始化未完成状态,只是创建了 XMLHttpRequest 对象,还未调用 open()方法;  1:请求已开始,open()方法已调用,但还没调用 send()方法;  2:请求发送完成状态,send()方法已调用;  3:开始读取服务器响应;  4:读取服务器响应结束。 通常我们只关心 4 状态。 XMLHttpRequest 对象的 status 属性表示服务器状态码,它只有在 readyState 为 4 时才能获取到。 XMLHttpRequest 对象的 responseText 属性表示服务器响应内容,它只有在 readyState 为 4 时才 能获取到! 2 AJAX 第二例(发送 POST 请求) 2.1 发送 POST 请求注意事项 POST 请求必须设置 ContentType 请求头的值为 application/x-www.form-encoded。表单的 enctype 默认值就是为 application/x-www.form-encoded!因为默认值就是这个,所以大家可能会忽略这个值! 当设置了
的 enctype=” application/x-www.form-encoded”时,等同与设置了 Cotnent-Type 请求 头。 但在使用 AJAX 发送请求时,就没有默认值了,这需要我们自己来设置请求头: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 当没有设置 Content-Type 请求头为 application/x-www-form-urlencoded 时,Web 容器会忽略请求 体的内容。所以,在使用 AJAX 发送 POST 请求时,需要设置这一请求头,然后使用 send()方法来设 置请求体内容。 xmlHttp.send("b=B"); 这时 Servlet 就可以获取到这个参数!!! AServlet public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println(request.getParameter("b")); System.out.println("Hello AJAX!"); response.getWriter().print("Hello AJAX!"); } ajax2.jsp

AJAX2

3 AJAX 第三例(用户名是否已被注册) 3.1 功能介绍 在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务 器返回 true 或 false,返回 true 表示这个用户名已经被注册过,返回 false 表示没有注册过。 客户端得到服务器返回的结果后,确定是否在用户名文本框后显示“用户名已被注册”的错误 信息! 3.2 案例分析  regist.jsp 页面中给出注册表单;  在 username 表单字段中添加 onblur 事件,调用 send()方法;  send()方法获取 username 表单字段的内容,向服务器发送异步请求,参数为 username;  RegistServlet:获取 username 参数,判断是否为“bochy”,如果是响应 true,否则响应 false; 3.3 代码 regist.jsp

注册

用户名:
密 码:
RegistServlet.java public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String username = request.getParameter("username"); if("bochy".equals(username)) { response.getWriter().print(true); } else { response.getWriter().print(false); } } 4 AJAX 第四例(省市二级联动) 4.1 功能介绍 select.jsp

省市联动

省: 市: 当 select.jsp 页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据)。然后使 用每个省份名称创建

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享文档获得金币 ] 2 人已下载

下载文档

相关文档