ajax知识点总结

自己的一些理解

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

简单说就是ajax就是一套可以让网站跟服务器交互的一种技术，能在我们需要时，不用再刷新网页就能去服务器要一些数据回来

为什么需要ajax

在不刷新页面的情况下向服务器请求数据

1、之前我们写的页面都是固定的假数据

2、真实网站的数据都是从服务器读取出来，服务器数据一旦改变，网站上显示的内容就发生改变

3、虽然可以通过直接输入URL的方式向服务器获取数据，但是页面会刷新

4、学会ajax就可以在不刷新页面的情况下向服务器请求数据，让网站内容动态改变

Ajax基本使用

基本使用-get请求

ajax使用步骤：

1、创建xhr对象

2、初始化请求

3、发送请求

4、注册onload事件，拿到服务器给你的结果

//1. 创建xhr对象
var xhr = new XMLHttpRequest();
//2. 初始化请求
xhr.open('get',服务器地址);
//3. 发送请求
xhr.send();
//4. 注册onload事件，拿到服务器给你的结果
xhr.onload = function(){
    console.log(xhr.responseText); 
}

初始化请求，我们用open方法，参数1现在就写死get，他叫做请求方法，参数2代表你要请求的服务器路径（网络上那么多资源，你得给个路径告诉它找哪个对不？）

第二步初始化请求你可以理解为是打电话中的输入号码那一步，第三步发送请求你可以理解为就相当于是按下了拨号键

基本使用-post请求

跟get请求步骤都是一样的，但是在初始化请求完成后（也即open方法后）要多设置一行请求头

//1. 创建xhr对象
var xhr = new XMLHttpRequest();
//2. 初始化请求
xhr.open('post',服务器地址);
//3. 设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//4. 发送请求
xhr.send('提交给服务器数据');
//5. 监听响应的回调函数
xhr.onload = function(){
    console.log(xhr.responseText);
}

如果不需要给服务器提交数据，则send方法里什么都不写，或者写null或者写undefined都可以

如果需要给服务器提交数据，依然是用 key=value 的格式

// 一条数据
xhr.send('key=value')
// 多条数据
xhr.send('key1=value1&key2=value2')
// 没有数据 下面三种都可以
xhr.send()
xhr.send(null)
xhr.send(undefined)

对于不同的请求方式数据传递的方式不同:

get请求直接拼接在url的后面:

 url?key=value&key2=value2

post请求,通过send方法传递

  xhr.send('key1=value2&key2=value2')

为什么方法和地址不同，甚至还需要传递数据过去呢？这是因为我们在请求不同的接口

什么是接口

我们在使用Ajax请求数据时，请求的地址不是随便写的，是对应的服务器地址。服务器提供给我们请求的这个地址，我们可以把它叫做接口，向接口对应的地址发请求获取数据，可以称为调用接口

我们在调用接口时，必须得知道的内容有3个

1、接口地址

2、请求方法

3、参数

看接口文档开发

既然服务器代码不是我们写的，是后端开发人员写的。那么我们怎么知道请求的地址、方式、参数是什么呢？

实际开发中，会提供一个接口文档，接口文档是一个最起码包含了请