AJAX-

AJAX简介

AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML

是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法

通过ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

XML简介

XML：可扩展标记语言。被设计用来传输和存储数据

XML和HTML类似，不同的是HTML中都是预定义标签，XML中没有预定义标签，全都是自定义标签，用来表示一些数据

比如：

现在有一个学生数据
name="孙悟空";age="18";sex="男";
用XML表示：
<student>
    <name>孙悟空</name>
    <age>18</age>
    <sex>男</sex>
</student>

现在已经被json取代

JSON

全称javascript object notation（javascript标记对象）

• 是一种轻量级的数据交换格式

  轻量级：体现在json体积小

  数据交换：各种语言之间交换数据

• 在js中json是以对象的形式存在的

  var student = {
      'name' = 'liu',
      'sex' = 'nan'
  }
  //这就是一个json对象

• java的JDBC连接数据库查询数据，然后将数据拼接成json格式的字符串，将json格式的字符串传给js，然后在js当中把json格式的字符串转换成json对象，这样就可以从json对象中获取数据了，这样就完成了数据的交换

eval函数

可以将一个字符串当做一段js代码解释执行

eval('var i = 100');//相当于var i = 100;
console.log(i);//输出100

AJAX的特点

优点：

1）可以无需刷新页面而与服务器端进行通讯

2）允许你根据用户事件来更新部分页面内容

缺点：

1）没有浏览历史，不能回退

2）存在跨域问题（同源）

3）SEO不友好（搜索引擎）

异步请求对象（XMLHttpRequest）

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

 

异步对象是在浏览器内部的一种javascript对象。

语法:

var xhr = new XMLHttpRequest();

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

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

局部刷新需要使用的技术：

1. javascript：创建XMLHttpRequest对象，调用它的属性或方法

2. dom：处理dom，更新select的数据

3. css：处理视图，更新，美化

4. servlet：服务器端技术

5. 数据格式：json

把这些技术综合的使用叫做ajax

异步对象的属性和方法

方法：

1）open(请求方式,服务器端的访问地址,布尔值)

请求方式：get、post

服务器端的访问地址：url

布尔值：决定异步还是同步,可以省略

如：xhr.open('get','loginServlet')

2）send()

使用异步对象发送请求

属性：

1）readyState：请求的状态。共有五个值：0、1、2、3、4

2）status：网络的属性，和http的状态码对应（200,404,500）

3）rasponseText：表示服务器端返回的数据

异步对象使用步骤

1）使用js创建异步对象

var xhr = new XMLHttpRequest();

2）给异步对象绑定事件。事件名称为onreadystatechange

xhr.onreadystatechange = function(){};

当readystate值发生变化时，执行函数

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status >= 200