AJAX请求 |
您所在的位置：网站首页 › ajax实现是基于什么对象 › AJAX请求 |
AJAX请求
|
第一章 AJAX 简介
一、什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。AJAX 是一种借助XML，HTML，CSS和Java Script创建更好，更快，更交互的Web应用程序的新技术。AJAX 是一种独立于Web服务器软件的Web浏览器技术。AJAX 使用XHTML作为内容，CSS使用文档对象模型和JavaScript进行动态内容显示。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。使用AJAX，当您点击提交时，JavaScript将向服务器发出请求，解释结果并更新当前屏幕。当客户端程序在后台请求来自服务器的信息时，用户可以继续使用该应用程序。数据驱动而不是页面驱动。二、AJAX 工作原理
三、AJAX是基于现有的Internet标准 AJAX是基于现有的Internet标准，并且联合使用它们： XMLHttpRequest 对象 (异步的与服务器交换数据)JavaScript/DOM (信息显示/交互)CSS (给数据定义样式)XML (作为转换数据的格式) 第二章 AJAX XHR-创建对象一、AJAX - 创建 XMLHttpRequest 对象 XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。XMLHttpRequest的对象用于客户端和服务器之间的异步通信。它执行以下操作： 在后台从客户端发送数据更新网页而不重新加载。从服务器接收数据二、 XMLHttpRequest 对象 创建 XMLHttpRequest 对象的语法： variable=new XMLHttpRequest();XMLHttpRequest对象的属性： 属性 描述 onreadystatechange 存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。 readyState 存有的XMLHttpRequest的状态从0到4发生变化。 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 responseText 以文本形式返回响应。 responseXML 以XML格式返回响应 status 将状态返回为数字（例如，“Not Found”为404，“OK”为200） statusText 以字符串形式返回状态（例如，“Not Found”或“OK”） XMLHttpRequest对象的方法 方法 描述 abort() 取消当前请求。 getAllResponseHeaders() 以字符串形式返回完整的HTTP标头集。 getResponseHeader( headerName ) 返回指定HTTP标头的值。 void open（method，URL） 打开指定获取或交的方法和URL的请求。 void open（method，URL，async） 与上面相同，但指定异步或不。 void open（method，URL，async，userName，password） 与上面相同，但指定用户名和密码。 void send（content） 发送获取请求。 setRequestHeader（ label，value） 将标签/值对添加到要发送的HTTP标头。 三、AJAX XHR-请求 AJAX 的工作原理
正如您在上面的示例中所看到的，XMLHttpRequest对象起着重要作用。 用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest 对象。HTTP 请求由 XMLHttpRequest 对象发送到服务器。服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。检索数据。服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。HTML 和 CSS 数据显示在浏览器上。·向服务器发送请求使用 XMLHttpRequest 对象的open()和send()方法： 方法 描述 open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）send(string) 将请求发送到服务器。 string：仅用于 POST 请求AJAX - 服务器响应 响应主体：xhr.responseText与xhr.responseXML都表示响应主体。 属性 描述 responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。 第三章 jQuery Ajax一、jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。语法: $(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL。可选的 callback 参数是 load() 方法完成后所执行的函数名称。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。这是示例文件（"demo_test.txt"）的内容： jQuery and AJAX is FUN!!! This is some text in a paragraph. 二、jQuery - AJAX 请求 $.ajax({ url: '01time.php', type: 'post', data: { id: 1, name: '张三' }, success: function (res) { console.log(res); } }); url：请求地址type：请求方式：get或者postdata：发送到服务器的数据（将自动转换为请求字符串格式）发送到服务器的数据，格式是json格式或者json字符串格式。如果是 GET 请求，系统就通过 url 传递；如果是 POST 请求，系统就通过设置请求体传递。 success：请求成功的回调函数 该回调函数中的第一个参数是服务器返回的数据（拿到的只是数据），它会自动根据服务端响应的Content-type 自动转换为对象，如果服务端没有设置响应头Content-type，返回的还是字符串类型的数据。 名称 值/描述 async 布尔值，表示请求是否异步处理。默认是 true。 beforeSend(xhr) 发送请求前运行的函数。 cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 contentType 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。 context 为所有 AJAX 相关的回调函数规定 "this" 值。 data 规定要发送到服务器的数据。 dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。 dataType 预期的服务器响应的数据类型。 error(xhr,status,error) 如果请求失败要运行的函数。 global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 ifModified 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 jsonp 在一个 jsonp 中重写回调函数的字符串。 jsonpCallback 在一个 jsonp 中规定回调函数的名称。 password 规定在 HTTP 访问认证请求中使用的密码。 processData 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 scriptCharset 规定请求的字符集。 success(result,status,xhr) 当请求成功时运行的函数。 timeout 设置本地的请求超时时间（以毫秒计）。 traditional 布尔值，规定是否使用参数序列化的传统样式。 type 规定请求的类型（GET 或 POST）。 url 规定发送请求的 URL。默认是当前页面。 username 规定在 HTTP 访问认证请求中使用的用户名。 xhr 用于创建 XMLHttpRequest 对象的函数。 |
【本文地址】
今日新闻 |
推荐新闻 |