什么是ajax?

什么是ajax

即异步的 JavaScript 和 XML,是一种用于创建快速动态网页的技术;传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。使用AJAX则不需要加载更新整个网页,实现部分内容更新。

2、常见的ajax使用场景(https://blog.csdn.net/qq_21439971/article/details/49230441)
1. 用Ajax进行数据验证(表单验证)
2.按需取数据(Ajax改进分类树的实现机制,例如部门结构,文档得分类结构常常使用树形空间呈现)在初始化页面时,只获取第一级子分类的数据并且显示;当用户点开一级分类的第一节点时,页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据;如果再请求已经呈现的二级分类的某一节点时,再次向服务器请求当前分类所属的三级子分类的所有数据,以此类推。
3.自动更新页面(例如最新的热点新闻,天气预报以及聊天室内容等)
3、为什么需要使用ajax
ajax主要是实现页面和web服务器之间数据的异步传输。
简单来说,不采用ajax的页面,当用户在页面发起请求时,就要进行整个页面的刷新,刷新快慢取决于服务器的处理快慢。在这个过程中用户必须得等待,不能进行其他操作。也就是同步的方式。客户端和服务端传递了很多不需要的数据。效率低,用户体验差。
采用ajax的页面,可以实现页面的局部更新,而不是整个页面的更新;
并且发起请求后,用户还可以进行页面上的其他操作。这就是异步的方式。客户端和服务端间只传递需要的数据,效率高,用户体验性好。并且Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
4、Ajax的工作原理
AJAX就是通过浏览器的内置对象XHMHttpResquest(xhr)来发送异步请求的,异步请求不会妨碍客户端的任何操作。
异步:
XHR相当于是一个通信兵,来负责客户端与服务器之间的通信传输。举个栗子:
要打仗了,前方阵地(客服端)不可能只等着通信兵(XHR)传递消息其他什么也不干吧,所以前方阵地还在干着自己的事情然后派通信兵去请求后方指挥部(服务器)的命令,指挥部下达命令指挥,通信兵再把命令传到前方阵地,然后前方阵地再执行命令相关的操作(客户端把数据渲染到页面),这也就是Ajax的异步原理。
同步:
所谓的同步就是前方阵地和通信兵一起去向服务器请求数据,直到通信兵请求到数据,我才开始渲染页面,在请求的过程中页面一直是白屏等待的。
5、XMLHttpRequest常用方法
一、open();
XMLHttpRequest.open()方法用于指定 HTTP 请求的参数,或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。
例:xhr.open(‘POST’, ‘/carrots-admin-ajax/a/login’, true);
参数:
a, method:用于指定请求的类型 “GET"或者"POST”
b, url:用于请求的地址, 可相对可绝对
c, asyncFlag:指定请求方式为同步还是异步, true为异步, false为同步
d,username 和 password 参数是可选的,为 url 所需的授权提供认证资格。如果指定了,它们会覆盖 url 自己指定的任何资格。
二、send();
XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的,如果不带参数,就表示 HTTP 请求只包含头信息,也就是只有一个 URL,典型例子就是 GET
请求;如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是 POST 请求。
var xhr = new XMLHttpRequest();
var data = ‘name=’ + userVal + ‘&pwd=’ + pwVal;
xhr.open(‘POST’, ‘/carrots-admin-ajax/a/login’, true);
/* POST的请求头 /
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
/
发出HTTP请求 */
xhr.send(data);
注意,所有 XMLHttpRequest 的监听事件,都必须在send()方法调用之前设定。(send放在最后)
6、XMLHttpRequest常用属性
一, readyState
XMLHttpRequest.readyState返回一个整数,表示实例对象的当前状态。该属性只读。它可能返回以下值。
0,表示 XMLHttpRequest 实例已经生成,但是实例的open()方法还没有被调用。
1,表示open()方法已经调用,但是实例的send()方法还没有调用,仍然可以使用实例的setRequestHeader()方法,设定 HTTP 请求的头信息。
2,表示实例的send()方法已经调用,并且服务器返回的头信息和状态码已经收到。
3,表示正在接收服务器传来的数据体(body 部分)。
4,表示服务器返回的数据已经完全接收。
二, onreadystatechange
XMLHttpRequest.onreadystatechange属性指向一个监听函数。
通信过程中,每当实例对象发生状态变化,它的readyState属性的值就会改变。这个值每一次变化,都会触发readyStateChange事件。
readystatechange事件发生时(实例的readyState属性变化),就会执行这个属性。
另外,如果使用实例的abort()方法,终止 XMLHttpRequest
请求,也会造成readyState属性变化,导致调用XMLHttpRequest.onreadystatechange属性。
三, responseText
XMLHttpRequest.responseText属性返回从服务器接收到的字符串,该属性为只读。只有 HTTP 请求完成接收以后,该属性才会包含完整的数据
四, status
XMLHttpRequest.status属性返回一个整数,表示服务器回应的 HTTP
状态码。一般来说,如果通信成功的话,这个状态码是200;如果服务器没有返回状态码,那么这个属性默认是200。请求发出之前,该属性为0。该属性只读。
200, OK,访问正常
404, Not Found,未发现指定网址
500, Internal Server Error,服务器发生错误
基本上,只有2xx和304的状态码,表示服务器返回是正常状态。

ajax的缺点:

ajax不支持浏览器back按钮。
安全问题 AJAX暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。
破坏了程序的异常机制。
不容易调试。
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值