真的找了很久的视频才找到,现在试着学一下...
今天开启新的学习内容:Ajax
首先,我们来了解一下全局刷新和局部刷新:
全局刷新和局部刷新
全局刷新: 使用form,href等发起的请求是全局刷新.用户发起请求,视图改变了,跳转视图,使用新的数据添加到页面
缺点:
1.传递的数据量比较大,占用网络的带宽
2.浏览器需要重新的渲染整个页面
3.用户的体验不是那么好
局部刷新: 在当前页面中.发起请求,获取数据,更新当前页面的DOM对象.对视图部分刷新.
特点:
- 数据量比较小,在网络中传输速度快
- 更新页面内容,是部分更新页面,浏览器不用全部渲染视图
- 在一个页面中,可以做多个局部刷新
- 从服务器获取的是数据,拿到更新视图
异步请求对象
在局部刷新中,使用异步请求对象,在浏览器内部发起请求,获取数据.
在局部刷新,需要创建一个对象,代替浏览器发起请求的行为,这个对象存在内存中.
代替浏览器发起请求并接收响应数据,这个对象叫做异步请求对象
全局刷新是同步行为,局部刷新是异步行为[浏览器数据没有全部更新]
这个异步对象用于在后台与服务器交换数据.XMLHttpRequest就是我们异步对象的名字.
异步对象XMLHttpRequest介绍
JS中的一种对象,使用JS语法创建和使用这个对象.
创建异步对象的方法:
var xhr = new XMLHttpRequest();
之后就可以使用xhr对象的属性或者函数,进行异步对象的操作
使用异步对象实现局部刷新,异步对象主要负责发起请求,传递请求的参数,并从服务器接收数据
局部刷新所要使用到的技术:
- JavaScript:创建XMLHttpRequest对象,调用它的属性或者方法
- DOML处理DOM,更新select的数据
- CSS: 处理视图,更新,美化
- servlet:服务器端技术
- 数据格式: JSON
我们把上面这些技术的综合应用叫做Ajax(阿贾克斯)
本文由“壹伴编辑器”提供技术支持
Ajax
AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）
Ajax概念：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
就比如说我们刷朋友圈,如果是全局更新,我们在给好友点赞时,整个页面就会重新刷新,然后就会跳转到最新的一条朋友圈,划到我们原来的朋友圈位置才能看到自己给对方点了赞,而局部更新就不一样,我们点赞完,不需要重新刷新整个朋友圈,数据就直接更新到页面中,我们可以看到自己给对方点了赞,这就是局部更新.
特点： 局部刷新；
ajax的优点 1.局部刷新； 2.优化了浏览器与服务器之间的传输，减少了不必要的数据返回，减少了带宽占用； 3.ajax引擎在客户端进行，承担部分服务器的工作，减少了服务器端的压力；
ajax的缺点 1.ajax不支持浏览器back按钮。 2.安全问题 AJAX暴露了与服务器交互的细节。 3.对搜索引擎的支持比较弱。 4.破坏了程序的异常机制。 5.不易调试。
Ajax的核心是JavaScript和JSON: 使用JavaScript操作异步对象,和服务器交换使用JSON数据格式.
异步对象XMLHttpRequest的属性和方法
(1) 创建异步对象,使用JS的语法
var xhr = new XMLHttpRequest();
(2) XMLHttpRequest方法
①open(请求的方式(如get/post), 服务器端的访问地址(也就是URL), 异步还是同步)
例如open('get', 'loginServlet', true)
②send(): 使用异步对象发送请求
(3) XMLHttpRequest属性
readyState:请求的状态
- 0: 表示创建异步对象时, new了xhr实例
- 1: 表示初始化异步对象的请求参数.执行open()方法
- 2: 使用send()发送请求
- 3: 使用异步对象从服务器接收数据,正在接受服务器返回的数据
- 4: 异步对象接收了数据,并在异步对象内部处理完成后.完成响应.
status: 网络的状态,与http的状态码对应
- 200: 请求成功
- 404: 服务器资源没有找到
- 500: 服务器内部代码有错误
responseText: 表示服务器端返回的数据
例如: var data = xhr.responseText;
下一节就是使用步骤,明天继续,今天先休息了
