黑马AJAX

1、Ajax的运行原理以及实现

1.1 Ajax的运行环境

 使用node开启服务器，代码写在html中，再放进静态资源文件夹中，就可以使用域名访问了

1.2 Ajax的运行原理

 实现无刷新更新数据，边浏览边请求响应。并且ajax请求和响应是可控的，并且可以反馈给用户。

1.3 Ajax的实现步骤

首先开启服务器 nodemon app.js

    <script type="text/javascript"> //客户端
      // 1.创建ajax对象
      var xhr = new XMLHttpRequest();
      // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
      // 1)请求方式 2)请求地址
      xhr.open("get", "http://localhost:3000/first");
      // 3.发送请求
      xhr.send();
      // 4.获取服务器端响应到客户端的数据
      xhr.onload = function () {
        console.log(xhr.responseText);
      };
    </script>
 


// 对应01html文件 服务器段
app.get('/first', (req, res) => {
	res.send('Hello, Ajax'); //为客户端响应文字
});

因为send(0 方法后，接受会受网络的影响，所以写一个onload等待他的响应

监听xhr对象的onload事件，完成之后获取响应数据console.log(xhr.responseText);这里面就是res.send（“ Hello，Ajax”） 但是知识字符串格式。

  JSON.parse()方法，它是Windows下面的方法

		xhr.onload = function (){
			// console.log(typeof xhr.responseText)
			// 将JSON字符串转换为JSON对象
			var responseText = JSON.parse(xhr.responseText);
			// 测试：在控制台输出处理结果
			console.log(responseText)
			// 将数据和html字符串进行拼接
			var str = '<h2>'+ responseText.name +'</h2>';
			// 将拼接的结果追加到页面中
			document.body.innerHTML = str;
		}

 需要把json字符串转换为json对象，此时上面的responseText就是一个对象了。接受的json和html拼接，然后添加DOM到html中，

 1.4 请求参数的传递

传统网站

 1.4.1 GET的提交

其实就是open()里面的参数写法改变了

 	<script type="text/javascript">
		// 获取按钮元素
		var btn = document.getElementById('btn');
		// 获取姓名文本框
		var username = document.getElementById('username');
		// 获取年龄文本框
		var age = document.getElementById('age');
		// 为按钮添加点击事件
		btn.onclick = function () {
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 获取用户在文本框中输入的值
			var nameValue = username.value;
			var ageValue = age.value;
			// 拼接请求参数
			var params = 'username='+ nameValue +'&age=' + ageValue;
			// 配置ajax对象
			xhr.open('get', 'http://localhost:3000/get?'+params);
			// 发送请求
			xhr.send();
			// 获取服务器端响应的数据
			xhr.onload = function () {
				console.log(xhr.responseText)
			}
		}
	</script>

app.get('/get', (req, res) => {
	res.send(req.query);
});

req.query对象就是服务器端接受客户端传过来的GET请求参数，res.send(req.query);再把它响应到客户端。

 1.4.1 POST的提交

post是放在send()中的

btn.onclick = function () {
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 获取用户在文本框中输入的值
			var nameValue = username.value;
			var ageValue = age.value;
			// 拼接请求参数
			var params = 'username='+ nameValue +'&age=' + ageValue;
			// 配置ajax对象
			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的请求参数要用const bodyParser = require('body-parser');
app.post('/post', (req, res) => {
	res.send(req.body); //相应回客户端
});

 var params = 'username='+ nameValue +'&age=' + ageValue;

如果请求参数是params中的，那么下面就是固定写法

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

1.5 请求参数的格式

请求方式必须是post，get请求不能提交json对象数据格式

请求头必须是 "application/json"

必须转换成字符串类型

    <script type="text/javascript">
      // 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);
      };
    </script>

获得服务器端的响应（Ajax状态码）

获取Ajax状态码，xhr.readyState //获取Ajax状态码

<script type="text/javascript">
      var xhr = new XMLHttpRequest();
      // 0 已经创建了ajax对象 但是还没有对ajax对象进行配置
      console.log(xhr.readyState);
      xhr.open("get", "http://localhost:3000/readystate");
      // 1 已经对ajax对象进行配置 但是还没有发送请求
      console.log(xhr.readyState);

      // 当ajax状态码发生变化的时候出发
      xhr.onreadystatechange = function () {
        // 2 请求已经发送了
        // 3 已经接收到服务器端的部分数据了
        // 4 服务器端的响应数据已经接收完成
        console.log(xhr.readyState);
        // 对ajax状态码进行判断 如果状态码的值为4就代表数据已经接收完成了
        if (xhr.readyState == 4) {
          console.log(xhr.responseText);
        }
      };
      xhr.send();
    </script>

app.get('/readystate', (req, res) => {
	res.send('hello');  
});

 xhr.onreadystatechange = function () 状态码发生变化时候自动触发

res.send('hello');  是发送给服务器的     console.log(xhr.responseText);是获取服务器的数据

1.6 Ajax错误处理

<script type="text/javascript">
		var btn = document.getElementById('btn');

		btn.onclick = function () {
			// 1.创建ajax对象
			var xhr = new XMLHttpRequest();
			// 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求
			// 1)请求方式 2)请求地址
			xhr.open('get', 'http://localhost:3000/error');
			// 3.发送请求
			xhr.send();
			// 4.获取服务器端响应到客户端的数据
			xhr.onload = function (){
				// xhr.status 获取http状态码
				console.log(xhr.responseText);

				if (xhr.status == 400) {
					alert('请求出错')
				}
			}
			// 当网络中断时会触发onerrr事件
			xhr.onerror = function () {
				alert('网络中断, 无法发送Ajax请求')
			}
		}

	</script>

    // Ajax状态码: 表示Ajax请求的过程状态 ajax对象返回的
    // Http状态码: 表示请求的处理结果 是服务器端返回的

低版本IE浏览器的缓存问题，浏览器会从缓存之中取上一次的服务器响应结果，而不是实时的响应

 解决方案：xhr.open('get', 'http://localhost:3000/cache?t=' + Math.random()); 每次让请求地址不一样

2 Ajax异步编程

      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          console.log("2