• 欢迎来到本博客,希望可以y一起学习与分享

Ajax

JavaScript/Jquery benz 4年前 (2017-11-22) 131次浏览 0个评论 扫描二维码
文章目录[隐藏]

一.  什么是Ajax

Ajax:asynchronous javascript and XML (异步JavaScript和XML)
其是可以与服务器进行(异步/同步)交换的技术之一。
Ajax的语言载体是JavaScript。其是浏览器的一个技术。
最大特点:页面不刷新。
XMLHttpRequest是Ajax的官方名称。

二. Ajax的使用

2.1  创建Ajax对象

2.1.1    主流浏览器方式
火狐、Google、苹果Safari、Opera、包括IE7以上版本的浏览器:

2.1.2    老版本的 IE (IE5 和 IE6)使用 ActiveX 对象:

2.1.3      为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

2.2  发起对服务器的请求

2.2.1 步骤

①创建新的http请求
xhr.open(请求方式get/post,url请求地址);
②发送请求
xhr.send(get->nunll/post->给服务器传递的信息);

方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string) 将请求发送到服务器。

  • string:仅用于 POST 请求

2.2.2  GET 请求

一个简单的 GET 请求:

在上面的例子中,您可能得到的是缓存的结果。

为了避免这种情况,请向 URL 添加一个唯一的 ID:

如果您希望通过 GET 方法发送信息,请向 URL 添加信息:

2.2.3  POST 请求

一个简单 POST 请求:

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

方法 描述
setRequestHeader(header,value) 向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

2.3  异步 – True 或 False?

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

2.3.1 Async = true

当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

2.3.2 Async = false

如需使用 async=false,请将 open() 方法中的第三个参数改为 false:

我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。

请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 – 把代码放到 send() 语句后面即可:

三.  Ajax接收服务器返回的信息

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

3.1  responseText 属性

如果来自服务器的响应并非 XML,请使用 responseText 属性。

responseText 属性返回字符串形式的响应,因此您可以这样使用:

3.2  responseXML 属性

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

请求 books.xml 文件,并解析响应:

3.3  onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status 200: “OK”

404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

注释:onreadystatechange 事件被触发 5 次(0 – 4),对应着 readyState 的每个变化。

3.4  使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):

四、 请求方式

4.1 post与get请求方式的不同

  • 1.传输数据量的不同
    get:受限于浏览器,大多数浏览器限制在2KB;
    post:原则没限制,php.ini对其限制为8MB;
  • 2.数据安全
    get:明文传输,不安全;
    post:加密传输,相对较安全;
  • 3.数据传输形式不一样
    get:URL地址后面以请求字符串形式传递参数,如:index.php?name=tom&age=10
    蓝色部分为请求字符,就是一些“名-值”对,中间使用”&”符号链接。
    post:模拟form表单,把数据以XML形式传递给服务器。

4.2 get请求需要注意的两个地方

  • 1.在URL地址后面以请求字符串形式传递参数
  • 2.对中文、=、&等特殊字符的处理

4.2.1  对特殊信息的处理

在浏览器里通过get参数传递一些特殊符号信息会被误解混淆,例如:’&’、’=’等。
为了避免特殊符号被误解产生歧义,需要对其进行编码处理。

  • 1. 在php里面可以通过函数url_encode()/url_decode()对特殊符号进行编码、反编码处理。
    (url_encode()可以把中文转变为浏览器可以识别的信息。编码后的信息为 %号后接两个十六进制数)
  • 2. 在JavaScript里面可以用过encodeURIComponent()对特殊符号进行编码。
编码后的信息可以被正常接收使用,无需反编码。

4.2.2  特殊字符URL编码列表

序号 特殊字符 含义 十六进制值
1. + URL 中+号表示空格 %2B
2. 空格 URL中的空格可以用+号或者编码 %20
3. / 分隔目录和子目录 %2F
4. ? 分隔实际的 URL 和参数 %3F
5. % 指定特殊字符 %25
6. # 表示书签 %23
7. & URL 中指定的参数间的分隔符 %26
8. = URL 中指定参数的值 %3D

4.3 post请求需要注意的四个地方

  • 1.给服务器传递数据需要调用send(请求字符串数据)方法。
  • 2.调用方法setRequestHeader()把传递的数据组织为XML格式(模仿form表单传递数据)。
  • 3.传递的中文信息无需编码,特殊符号像’&’、’=’等 仍需要编码。
  • 4.该方式请求的同时也可以传递get参数信息,同样使用$_GET接收该信息。

总结

 


文章 Ajax 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!