利用Ajax与服务器交谈.ppt

2014万户网络培训材料 研发一部 汇报人：凤池 利用Ajax与服务器交谈 1 2013年上半年工作目标完成情况 （正视） 温习Ajax 创建一个XHR（XML HttpRequest，XML HTTP请求）实例 创建之后，XHR实例跨越所有支持的浏览器，表现一组方便可靠的属性和方法（如下图所示）。创建XHR实例之后，下面看如何设置请求以及向服务器发起请求。 3 2013年下半年工作目标及行动策略 （改善） XHR的方法和属性 方 法 描 述 abort() 导致当前正在执行的请求被取消 getAllResponseHeaders() 返回一个字符串，包含所有响应标头的名称和值 getResponseHeader(name) 返回指定的响应标头的值 open(method,url,async, username,password) method：请求的HTTP方法(GET,POST)；url：目标URL，async：请求可以声明为同步的false（可选），username,password：基于容器认证的请求所需的用户名和口令（可选） send(content) 发起带有指定内容的请求 setRequestHeader(name,value) 利用指定的名称和值，设置一个请求标头，必须在调用open()方法后调用这个方法。 属 性 描 述 onreadystatechange 指派在请求的状态发生变化时所使用的事件处理程序 readyState 一个整数值，指示请求的状态如下：0：未初始化；1：正在加载；2：已加载；3：交互；4完成 responseText 在响应里所返回的内容 responseXML 如果内容是XML，就根据内容创建XML DOM status 服务器所返回的响应状态码，200：成功；404：未找到等 statusText 响应所返回的状态文本消息 发起请求 跟踪进展 获得响应 就绪处理程序确定readyState为已完成并且请求已成功地完成后，就可以从XHR实例获取响应体。 注意：初始化一个XHR对象，需要特定于浏览器的代码；就绪处理程序必须过滤大量的无趣的状态变化；响应体必须根据其格式以不同方式来进行处理。 jQuery加载内容到元素上 利用$.load()加载内容 利用最为基本却有用的jQuery的Ajax命令之一load(),从服务器端获取资源轻松地加载内容，这个命令的完整的语法说明如下： 命令语法：load load(url,parameters,callback) 有可选的参数，向指定的URL发起Ajax请求，可以指定回调函数，在请求完成时调用，响应文本将替换所有已匹配元素的内容。 参数 url：（字符串）服务器端的URL，正是向它发起请求； parameters：一个对象，其属性被序列化为正确编码的参数以便传递到请求里，如果指定，就用POST方法来发送请求，如果省略，就用GET方法来发送请求； callback：一个回调函数，在响应数据已经加载到包装集元素之后被调用，传入这个函数的参数是响应文本、状态码，以及XHR实例。 返回：包装集 虽然用起来很方便，但这个命令还是有一些需要注意的重要细节，例如，如果利用parameters参数来提供请求参数，则发送POST请求；如果省略parameters参数，则发送GET请求。如果想要发送带有参数的GET请求，可以把参数作为查询字符串包含在URL里，但要意识到如果这样做，就应确保查询字符串正确地格式化以及请求参数的名称和值为URI编码。 load()命令极为简便，并且非常适合于由服务器（比如JSP和PHP）所驱动的Web应用。 如果想要获取HTML片段用来填充一个元素（或一组元素）的内容，load()命令就非常有用，但有时候我们或许想对Ajax请求的完成方式施加更多的控制或对返回的响应体的数据进行更为复杂的处理。 发起GET和POST请求 利用$.get()获取数据 如果我们想要从服务器获取一些数据然后决定进行什么处理（而不是由load()命令把它 设置为一个HTML元素的内容），可以利用$.get()实用工具函数。 函数语法：$.get $.get(url,parameters,callback) 利用指定的URL、带着任何已传入参数作为查询字符串而向服务器发个GET请求。 参数 url：（字符串）将要通过GET方法进行交互的服务器端资源的URL； parameters：（对象/字符串）一个对象，其属性作为“名称/值对”用于构造查询字符串并追加到URL，或者一个预先格式化的和URI编码的查询字符串； callback：回调函数