Ajax笔记(1)

真的找了很久的视频才找到,现在试着学一下...

今天开启新的学习内容:Ajax

首先,我们来了解一下全局刷新和局部刷新:

全局刷新和局部刷新

全局刷新: 使用form,href等发起的请求是全局刷新.用户发起请求,视图改变了,跳转视图,使用新的数据添加到页面

缺点:

1.传递的数据量比较大,占用网络的带宽

2.浏览器需要重新的渲染整个页面

3.用户的体验不是那么好

局部刷新: 在当前页面中.发起请求,获取数据,更新当前页面的DOM对象.对视图部分刷新.

特点:

1. 数据量比较小,在网络中传输速度快
2. 更新页面内容,是部分更新页面,浏览器不用全部渲染视图
3. 在一个页面中,可以做多个局部刷新
4. 从服务器获取的是数据,拿到更新视图

异步请求对象

在局部刷新中,使用异步请求对象,在浏览器内部发起请求,获取数据.

在局部刷新,需要创建一个对象,代替浏览器发起请求的行为,这个对象存在内存中.

代替浏览器发起请求并接收响应数据,这个对象叫做异步请求对象

全局刷新是同步行为,局部刷新是异步行为[浏览器数据没有全部更新]

这个异步对象用于在后台与服务器交换数据.XMLHttpRequest就是我们异步对象的名字.

异步对象XMLHttpRequest介绍

JS中的一种对象,使用JS语法创建和使用这个对象.

创建异步对象的方法:

var xhr = new XMLHttpRequest();

之后就可以使用xhr对象的属性或者函数,进行异步对象的操作

使用异步对象实现局部刷新,异步对象主要负责发起请求,传递请求的参数,并从服务器接收数据

局部刷新所要使用到的技术:

1. JavaScript:创建XMLHttpRequest对象,调用它的属性或者方法
2. DOML处理DOM,更新select的数据
3. CSS: 处理视图,更新,美化
4. servlet:服务器端技术
5. 数据格式: 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;

下一节就是使用步骤,明天继续,今天先休息了