Ajax学习笔记 （一 关于基础部分）

我们知道在传统的网站中存在着一些问题：

于是为了有效的解决问题就用到了ajax。
那么什么是Ajax了？

Ajax的一些常用的应用场景：

注意：
Ajax技术需要运行在网站环境中才能生效。

Ajax的实现步骤：
1.创建Ajax对象:

var xhr = new XMLHttpRequest();

2.告诉Ajax请求地址以及请求方式：

xhr.open('get','http://localhost:3000/index'); //请求方式和地址根据你们情况来选择.

3.发送请求：

xhr.send();

4.获取服务器端给与客户端的数据：

xhr.onload = function() {
   console.log(xhr.responseText); //返回结果在responseTexts属性里
}

服务器端响应的数据格式
我们要知道服务器端大多情况下会以json对象作为响应数据的格式，在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。
所以我们要用到第一个方法，

使用它就可以将我们接受到的响应数据 xhr.responseText 转换为json对象。

注意： 我们现在是使用get请求方式，当要提交表单数据时，需要将表单中的各项数据加在请求地址中提交的，比如：

以？开头，各项数据以属性名，属性值的形式并用&进行隔开。

但是啊，我们还有post请求方式，就又是不同的格式了。

POST请求方式：

// 获取用户在文本框中输入的值
var nameValue = username.value;
var ageValue = age.value;
// 拼接请求参数
var params = 'username='+ nameValue +'&age=' + ageValue;

var xhr = new XMLHttpRequest();
xhr.open('post','http://localhost:3000/post');
// 设置请求参数格式的类型（post请求必须要设置）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
xhr.send(params);
// 获取服务器端响应的数据
xhr.onload = function () {
	console.log(xhr.responseText)
}

我们看到post请求方式多了二个步骤，我们需要告诉是什么类型数据，数据不再放在请求地址中，是放在send（）里面。
我们说到了要告诉服务器端提交的数据类型，这里使用了第一种数据类型，是一种各项数据以属性名，属性值的形式并用&进行隔开的数据，还可以传递一个json对象。

// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('post', 'http://localhost:3000/json');
// 通过请求头告诉服务器端客户端向服务器端传递的请求参数的格式是什么
xhr.setRequestHeader('Content-Type', 'application/json');
// JSON.stringify() 将json对象转换为json字符串
// 3.发送请求
xhr.send(JSON.stringify({name: 'lisi', age:50}));
// 4.获取服务器端响应到客户端的数据
xhr.onload = function (){
	console.log(xhr.responseText)
}

我们这里用到了一个方法： JSON.stringify() ，他将我们传递的json对象转换为字符串，我们不能直接传递一个json对象到服务器端，我们在前面也说了http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

注意： get请求可是不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的。

我们在接收服务器端响应的数据时，使用的事件除了onload事件外，还可以使用 onreadystatechange事件，这个事件是当ajax状态码发生变化时自动触发该事件，先说说ajax状态码：

分别对应着ajax对象的每个步骤，在说回 onreadystatechange事件：

这样就可以代替onload事件， 在看二个的区别：

具体使用哪种，根据情况选择。