ＡＪＡＸ基础知识

最新推荐文章于 2022-08-12 09:54:19 发布

zhao1314521xx

最新推荐文章于 2022-08-12 09:54:19 发布

阅读量336

点赞数

文章标签： xmlhttprequest 服务器 javascript ajax url 文档

本文链接：https://blog.csdn.net/zhao1314521xx/article/details/1796665

版权

基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XMLHttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。
一 ajax
Ajax是一个客户端技术,在一般的Web应用中，服务器端代码会呈现一个完整的页面，并涉及一个完整的工作单元。利用Ajax，可能只返回一点点文本，而且只涉及一个业务应用的很小子集。
二　XMLHttpRequest
　　１作用：发送请求和处理响应
　　　Internet Explorer把XMLHttpRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera）把它实现为一个本地JavaScript对象。
　　２创建XMLHttpRequest对象的一个实例
　　　var xmlHttp:// 建一つ変
      // createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。
　　　function createXMLHttpRequest() {
          if (window.ActiveXObject) { // 浏览器是否支持ActiveX控件，
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//例化ActiveXObject的一个新实例来创建XMLHttpRequest对象，并传入一个串指示要创建何种类型的ActiveX对象。
            }
           else if (window.XMLHttpRequest){ //浏览器是否把XMLHttpRequest实现为一个本地JavaScript对象。
    xmlHttp= new XMLHttpRequest();
    }
    ３　准XMLHttpRequest操作

准XMLHttpRequest操作

　 abort()
  停止当前请求

getAllResponseHeaders()
  把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")
  返回指定首部的串值

open("method", "url")
  建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数

send(content)
  向服务器发送请求

setRequestHeader("header", "value")
  把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
　　　　void open(string method, string url, boolean asynch, string username, string password)：这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数，还有3个可选参数。要提供调用的特定方法（GET、POST或PUT），还要提供所调用资源的URL。另外还可以传递一个Boolean值，指示这个调用是异步的还是同步的。默认值为true，表示请求本质上是异步的。如果这个参数为false，处理就会等待，直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一，所以倘若将这个参数设置为false，
　　　　void send(content)：这个方法具体向服务器发出请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流，或者串。传入这个方法的内容会作为请求体的一部分发送。

　　４表2-2　标准XMLHttpRequest属性

　　　onreadystatechange
　　每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数

　　readyState
　　请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成

　　responseText
　　服务器的响应，表示为一个串

　　responseXML
　服务器的响应，表示为XML。这个对象可以解析为一个DOM对象

　status
　服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）

　tatusText
　HTTP状态码的相应文本（OK或Not Found（未找到）等等）
５　get post
从理论上讲，如果请求是幂等的就可以使用GET，所谓幂等是指多个请求返回相同的结果。实际上，相应的服务器方法可能会以某种方式修改状态，所以一般情况下这是不成立的。这只是一种标准。更实际的区别在于净荷的大小，在许多情况下，浏览器和服务器会限制URL的长度URL用于向服务器发送数据。一般来讲，可以使用GET从服务器获取数据；换句话说，要避免使用GET调用改变服务器上的状态。
般地，当改变服务器上的状态时应当使用POST方法。不同于GET，需要设置XML- HttpRequest对象的Content-Type首部，如下所示：

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
与GET不同，POST不会限制发送给服务器的净荷的大小，而且POST请求不能保证是幂等的。
６　使用XMLHttpRequest对象发送请求的基本步骤如下：
　　为得到XMLHttpRequest对象实例的一个引用，可以创建一个新的实例，也可以访问包含有XMLHttpRequest实例的一个变量。
　　2. 告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针。
　　3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数：一个是指示所用方法（通常是GET或POST）的串；一个是表示目标资源URL的串；一个是Boolean值，指示请求是否是异步的。
　　4. 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数，通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时，要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送，则使用null。
７　XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性respo-
nseText将响应提供为一个串，第二个属性responseXML将响应提供为一个XML对象。
８　使用innerHTML属性创建动态内容、表示一组开始标记和结束标记之间的内容。
９　文档对象模型（DOM）是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理，处理的结果可以放回到所提供的页面中。

用于处理XML文档的DOM元素属性

childNodes
返回当前元素所有子元素的数组

firstChild
返回当前元素的第一个下级子元素

lastChild
返回当前元素的最后一个子元素

nextSibling
返回紧跟在当前元素后面的元素

nodeValue
指定表示元素值的读/写属性

parentNode
返回元素的父节点

previousSibling
返回紧邻当前元素之前的元素

用于遍历XML文档的DOM元素方法

getElementById(id) (document)
获取有指定惟一ID属性值文档中的元素

getElementsByTagName(name)
返回当前元素中有指定标记名的子元素的数组

hasChildNodes()
返回一个布尔值，指示元素是否有子元素

getAttribute(name)
返回元素的属性值，属性由name指定