前端 ---- ajax（1）

ajax
概念
1.Ajax 技术需要运行在网站环境中才能生效，当前课程会使用Node创建的服务器作为网站服务器。
2.Ajax的使用
	1.创建 Ajax 对象
		var xhr = new XMLHttpRequest();
	2.告诉 Ajax 请求地址以及请求方式
		xhr.open('get', 'http://www.example.com');
	3.发送请求
		xhr.send();
	4.获取服务器端给与客户端的响应数据
		 xhr.onload = function () {
			 console.log(xhr.responseText);
		 }
3.服务器端响应的数据格式
	1.在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。
	2.在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。
    转换----------JSON.parse() // 将 json 字符串转换为json对象
                JSON.stringify() // 将json对象转换为json字符串

4.请求参数传递
	1.GET 请求方式
		xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');
	2.POST 请求方式
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
		xhr.send('name=zhangsan&age=20');

5.请求参数的格式
	1.application/x-www-form-urlencoded
		name=zhangsan&age=20&sex=男
	2.application/json
		{name: 'zhangsan', age: '20', sex: '男'}
		
	----post中，如果传递是数据是json对象要转换成json字符串
		JSON.stringify() // 将json对象转换为json字符串
6.获取服务器端的响应
	Ajax 状态码  (xhr.readyState // 获取Ajax状态码)
	0：请求未初始化(还没有调用open())
	1：请求已经建立，但是还没有发送(还没有调用send())
	2：请求已经发送
	3：请求正在处理中，通常响应中已经有部分数据可以用了
	4：响应已经完成，可以获取并使用服务器的响应了
	
	---onreadystatechange 事件
	当 Ajax 状态码发生变化时将自动触发该事件。
	在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了。
	-------有些版本不支持xhr.unload只支持xhr.onreadystatechange来响应


	区别描述	                onload事件	onreadystatechange事件
	是否兼容IE低版本	        不兼容	    兼容
	是否需要判断Ajax状态码	    不需要	    需要
	被调用次数	                一次	    多次

7.Ajax 错误处理
	1.   网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
	可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
	2.   网络畅通，服务器端没有接收到请求，返回404状态码。
	检查请求地址是否错误。
	3.   网络畅通，服务器端能接收到请求，服务器端返回500状态码。
	服务器端错误，找后端程序员进行沟通。
	4.   网络中断，请求无法发送到服务器端。
	会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

8.低版本 IE 浏览器的缓存问题
    问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。
    解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。 
              xhr.open('get', 'http://www.example.com?t=' + Math.random());


 // 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }






心得
1.
	XML格式  客户端和服务端传输内容的数据格式，现在一般是JSON对象
2.传递参数
	get和post都可以传递参数，post在传递时需要设置配置,但是服务器端在接收参数时都需要第三方模块  body-parser
	而get请求只能传递name=xxx&age=xx这种请求方式，而post可以传递刚刚那种也能传递JSON对象
	1.get
		var params = 'username='+ nameValue +'&age=' + ageValue;
		// 配置ajax对象
		xhr.open('get', 'http://localhost:3000/get?'+params);
		// 发送请求
		xhr.send();
		// 获取服务器端响应的数据
		xhr.onload = function () {
			console.log(xhr.responseText)
		}
	2.post
		var params = 'username='+ nameValue +'&age=' + ageValue;
		// 配置ajax对象
		xhr.open('post', 'http://localhost:3000'/post)
		xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded');

		// 发送请求
		xhr.send();
		// 获取服务器端响应的数据
		xhr.onload = function () {
			console.log(xhr.responseText)
		}
	
3.
服务端在接收客户端传过来的ajax参数时，app.use(bodyParser.urlencoded());代表解析application/x-www-form-urlencoded（name=xxx&age=xx）这种格式的请求头
app.use(bodyParser.json());代表解析application/json({name:XX,age:XX})这种格式的请求头------这种请求头发送时需要把JSON对象变成字符串（xhr.send(JSON.stringify(params));）

4.
Ajax状态码(0,1,2,3,4)：表示Ajax请求的过程状态，是ajax对象返回的
Http状态码(200,400,404,500...)：表示请求处理的结果，是服务器端返回的

5.substr(start, length)  位置可以是负数，长度不行，如果是负数就会变成0