认识Ajax，体验Ajax

一、了解Ajax

1.什么是Ajax

Ajax的全称是Asynchronous Javascript And XML (异步JavaScript和XML)。
通俗的理解:在网页中利用XML HttpRequest对象和服务器进行数据交互的方式，就是Ajax。
我们之前所学的技术，只能把网页做的更美观漂亮,或添加一些动画效果，但是，Ajax能让我们轻松实现网页与服务器之间的数据交互。

2.Ajax的典型应用场景

用户名检测:注册用户时，通过ajax的形式，动态检测用户名是否被占用

搜索提示:当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表

数据分页显示:当点击页码值的时候，通过ajax的形式，根据页码值动态刷新表格的数据

数据的增删改查:数据的添加、删除、修改、查询操作,都需要通过ajax的形式，来实现数据的交互
 

3. jQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂,所以jQuery对XML HttpRequest进行了封装,提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。
jQuery中发起Ajax请求最常用的三个方法如下:
●$.get0      ●$.post(       ●$.ajax0

3.1 $.get()函数的语法

jQuery中$.get0函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。
$.get0函数的语法如下:
$.get (url, [data], [callback])
其中，三个参数各自代表的含义如下:
参数名   参数类型   是否必选    说明
url      string          是            要请求的资源地址
data    object     请求资源期间要携带的参数
callback function  否   请求成功时的回调函数

//$.get()发起不带参数的请求
//使用$.get0函数发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可，代码如下:
$. get ('http: //www. liulongbin. top: 3006/ api/getbooks', function (res) {
console. log(res) // 这里的res是服务器返回的数据
})

//$.get()发起带参数的请求
//使用$.get0函数发起带参数的请求时,示例代码如下:
$. get ('http://www. liulongbin. top:3006/api/getbooks', { id: 1 }，function(re[j) {
console.log (res)
})

3.2 $.post()函数的语法

jQuery中$.post0函数的功能单一， 专门用来发起post请求，从而向服务器提交数据。
$.post(函数的语法如下:
$. post(url, [data], [callback])
其中，三个参数各自代表的含义如下:
参数名                        参 数类型         是否必选          说明
url                               string                 是               提交数据的地址
data                           object                 否               要提交的数据
callback                    function               否              数据提交成功时的回调函数

 

// $.post()向服务器提交数据
//使用$post0向服务器提交数据的示例代码如下:
$.post(
'http://www. liulongbin. top:3006/api/ addbook', //请求的URL地址
{ bookname:
'水浒传'，author: ' 施耐庵'，publisher: ' 上海图书出版社' }, //提交的数据
function(res) { // 回调函数
console. log (res)
}

3.3 $.ajax()函数的语法

相比于$.get0和$.post0函数, jQuery中提供的$.ajax0函数,是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
$.ajax(    //函数的基本语法如下:
$.ajax({
type:，//请求的方式，例如GET 或POST
url:'//请求的URL地址
data:{  },//这次请求要携带的数据
success: function(res) { } // 请求成功之后的回调函数
})

 

//使用$.ajax()发起GET请求
//使用$.ajax(发起GET请求时，只需要将type属性的值设置为'GET' 即可:
$.ajax({
type: 'GET', //请求的方式
url: 'http://www. liulongbin. top: 3006/ api/getbooks', // 请求的URL地址
data: { id: 1 },// 这次请求要携带的数据
success:
function(res) { //请求成功之后的回调函数
console. log (res)
}
})

//使用$.ajax()发起POST请求
//使用$.ajax0 发起POST请求时，只需要将type属性的值设置为'POST' 即可:
$.ajax({
type:'POST', //请求的方式
url:'http://wwW. liulongbin. top:3006/api/ addbook', // 请求的URL 地址
data: { //要提交给服务器的数据
bookname: '水浒传 ',
author: ' 施耐庵'，
publisher: '上海图书出版社'
}，
success:
function(res) { //请求成功之后的回调函数
console. log (res)
}

4.接口的概念

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口(简称接口) 。同时,每个接口必须有请求方式。
例如: http://www.liulongbin.top:3006/api/ getbooks 获取图书列表的接口 (GET请求)

    http://www.liulongbin.top:3006/api/addbook 添加图书的接口(POST请求)

 5.表单的同步提交及缺点

1.什么是表单的同步提交
通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交。

2.表单同步提交的缺点
①<form> 表单同步提交后，整个页面会发生跳转，跳转到action URL所指向的地址，用户体验很差。
②<form> 表单同步提交后,页面之前的状态和数据会丢失。

3.如何解决表单同步提交的缺点
如果使用表单提交数据，则会导致以下两个问题:
①页面会发生跳转
②页面之前的状态和数据会丢失
解决方案:表单只负责采集数据，Ajax负责将数据提交到服务器。

二、XMLHttpRequest的基本使用

1.什么是XMLHttpRequest

XMLHttpRequest (简称xhr)是浏览器提供的Javascript对象,通过它,可以请求服务器上的数据资源。上面所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的。
 

2.了解xhr对象的readyState属性

XMLHttpRequest对象的readyState属性,用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个:
值              状态                            描述
0            UNSENT                     XMLHttpRequest对象已被创建，但尚未调用open方法。

1           OPENED                     open(方法已经被调用。
2        HEADERS RECEIVED        send0方法已经被调用，响应头也已经被接收。

3          LOADING                          数据接收中，此时response属性中已经包含部分数据。
4          DONE                          Ajax请求完成，这意味着数据传输已经彻底完成或失败。
 

3.XMLHttpRequest的基本使用

3.1使用xhr发起GET请求

步骤:
①创建xhr对象
②调用xhr.open(函数
③调用xhr.send()函数
④监听xhr.onreadystatechange事件

//1.创建XHR对象
var xhr = new XMLHttpRequest ()
// 2.调用open函数，指定请求方式与URL地址
xhr .open('GET', 'http:/ /www. liulongbin. top: 3006/ api/ getbooks')
// 3.调用send函数，发起Ajax请求
xhr . send( )
// 4.监听onreadystatechange 事件
xhr . onreadystatechange = function() {
// 4.1监听xhr对象的请求状态readyState ;与服务器响应的状态status
if (xhr. readyState == = 4 && xhr. status === 200) {
// 4.2 打印服务器响应回来的数据
console. log (xhr. responseText)
}
}

3.2使用xhr发起POST请求

步骤:
①创建xhr对象
②调用xhr.open) 函数
③设置Content-Type属性(固定写法)
④调用xhr.send0函数，同时指定要发送的数据
⑤监听xhr.onreadystatechange事件
 

//1.创建xhr对象
var xhr = new XMLHttpRequest ()

// 2.调用open()
xhr .open('POST', 'http://www. liulongbin. top: 3006/api/ addbook')

// 3.设置Content-Type 属性(固定写法)
xhr . setReque stHeader ('Content-Type', ' application/x- www- form- urlencoded' )

// 4.调用send(),同时将数据以查询字符串的形式，提交给服务器
xhr . send ' bookname=水浒传&author=施耐庵&publisher=天津图书出版社')

// 5.监听onreadystatechange 事件
xhr . onreadystatechange = function() {
if (xhr. readyState === 4 && xhr.status === 200) {
console. log (xhr . responseText)
}

总结

简单的认识了一些Ajax入门的知识点，利用这些知识可以从服务器上获取或提供资源请求上到页面做一些简单的页面渲染，体验Ajax能让我们轻松实现网页与服务器之间的数据交互。