快速理解ajax

一、Ajax简介、优劣势、应用场景以及技术

Asynchronous Javascript And XML (异步的JavaScript和XML)

ajax并不是一种单一的技术,而是有机利用一系列交互式网页应用相关的技术所形成的结合体,是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新;这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

优点:

页面无刷新,用户体验好。

异步通信,更加快的响应能力。

减少冗余请求,减轻了服务器负担

基于标准化的并被广泛支持的技术,不需要下载插件或者小程序

缺点:

ajax干掉了back按钮,即对浏览器后退机制的破坏。

存在一定的安全问题。

对搜索引擎的支持比较弱。

破坏了程序的异常机制。

无法用URL直接访问

ajax应用场景

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面

ajax所包含的技术

ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。

使用CSS和XHTML来表示。

使用DOM模型来交互和动态显示。

使用XMLHttpRequest来和服务器进行异步通信。

使用javascript来绑定和调用。

二、ajax使用步骤

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步

1.创建XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成,所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest对象的语法:

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

兼容各个浏览器的创建Ajax的工具函数

2.准备请求

初始化该XMLHttpRequest对象,接受三个参数:

3.发送请求

一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null或为空。

GET请求:

POST请求:

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

4.处理响应

onreadystatechange :当处理过程发生变化的时候执行下面的函数

readyState :ajax处理过程

0:请求未初始化(还没有调用 open())。

1:请求已经建立,但是还没有发送(还没有调用 send())。

2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。

3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。

4:响应已完成;您可以获取并使用服务器的响应了。

status属性:

200:"OK"

404: 未找到页面

responseText:获得字符串形式的响应数据

responseXML:获得 XML形式的响应数据

返回值一般为json字符串,可以用JSON.parse(xhr.responseText)转化为JSON对象

上面所说的get 和 post 请求到底有什么区别呢?

两者不同

给服务器传递数据量, get 请求最多是2k

post 原则没限制 php对其限制为8M

安全方面,post 传输数据更加安全

传递数据的形式不一样

get 方式在 url 地址后边以请求字符串的形式传递参数

http://网址/index.php?name=tom&age=23&addr=beijing

以&符号连接的就是请求字符串

post方式是把 form 表单的数据给请求出来以 xml 形式传递给服务器

其中get请求方式

在 url 地址之后以请求字符串的形式传递数据

对中文 = &等特殊符号处理

在 js 中用encodeURIComponent()对中文进行编码

而post请求方式

给服务器传输数据需要使用send(请求字符串)的方法

调用方法setRepuestHeader()把传递的参数组织为xml 格式(仿form 给服务器传送数据)

传递的中文信息不需要编码,特殊符号需要进行编码

该方式请求的同时也可以传递 get 参数信息

什么是同步和异步?

异步:同一个时间点允许执行多个进程 true

同步:同一个时间点只允许执行一个程序 false

ajax 对象open(请求方式 请求地址 同步[异步])

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180709G1Y9UD00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券