jQuery——Ajax

Ajax
1、Ajax简介

asynchronous JavaScript and XML        异步的 JS 和 XML
ajax通过http协议向服务器端请求数据，异步操作
无刷新获取数据

XML：
	可扩展标记语言
	XML被设计用来传输和存储数据，HTML来呈现数据
	XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全是自定义标签，用来表示一些数据
	
Http：
	hypertext transport protocol    超文本传输协议
	详细规定了浏览器与万维网服务器之间互相通信的规则
	
	a、请求报文
		格式与参数：
			行            请求类型（get、post）、URL（?keyword=原生）、HTTP版本
			头            HOST：atguigu.com
					Cookie：name = guigu
					Content-type：application/x-www-form-urlencodee
					User-Agent：Chrome 83
			空行
			体            get 为空
					post（username=admin&password=admin）
	b、响应报文
		格式与参数：
			行            HTTP版本、响应状态码、响应状态字符串
			头            Content-type：text/html；charset=utf-8
					Content-length：2048
					Content-encoding：gzip
			空行
			体            HTML内容
低级别接口   底层接口
http://39.105.67.242:5588/swagger-ui.html#/
http://39.96.21.48:8001/swagger-ui.html

2、Ajax的特点

优点：
	可以无需刷新页面而与服务器端进行通信
	允许你根据用户事件来更新部分页面内容
缺点：
	没有浏览历史，不能回退
	存在跨域问题
	SEO不友好（SEO 搜索引擎优化），爬虫爬不到

原生ajax

	○ 实例化XMLHttpRequest
		§ var xhr = new XMLHttpRequest()
	○ 建立连接
		§ xhr.open('请求方式', 'url')
	○ 设置请求头
		xhr.requestHeader('Content-Type', 'application/x-www-form-urlencoded')       //查询字符串
			□ key1=val1&key2=val2
		xhr.rewquertHeader('Content-Type', 'application/json')         //json字符串
			□ '{'id':'1','name':'tom'}'
	○ 发送请求
		xhr.send([datal])
	○ 监听响应
		xhr.onreadystatechange = function(res){
			//请求发送成功
			if(xhr.readyState == 4){
				//响应成功
				if(xhr.status == 200){
				}
			}
		}

状态码

200       成功
404       页面找不到
500       后台问题
404       用户登录问题，没有权限

请求方式

	get
	post
get和post请求有什么区别？
	1.Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的，通过request body来请求参数。 
	2.Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。

3、Ajax语法

1）ajax()
	ajax({
		url: '请求地址'，
		method: '请求方式'，(type: '请求方式'),
		contentType: 'application/json'       //默认就是查询字符串application/x-www-form-urlencoded，如果接口需要传递一个json字符串，需要设置
		data: '参数',
		success: function(res) {
			// 请求成功以后res
		},
		// success() {}    //es6简写形式
		error: function(res) {
			// 请求失败
		},
		complete: function() {
			// 不管请求成功还是失败
		}
	})
	
	速写形式：
		1）get
			$.get(url, [data], function(res) { })
			$.post(url, data, function(res) { })         // post 参数为json字符串的时候不允许使用简写形式
			
	1-get 无参数
		// 点击查询，发送请求，获取地址信息
		$.ajax({
			url: 'http://39.105.67.242:5588/address/findAll',
			method: 'get',      // 请求方式不区分大小写
			success: function (res) {
				console.log(res);
			}
		})
		
		// 速写形式
                $.get('http://39.105.67.242:5588/address/findAll', function (res) {
			console.log(res);
                })

	2-get  有参数
                $.ajax({
			url: 'http://39.105.67.242:5588/customer/findCustomerById',
			method: 'get',
			data: {id: 247},     // 通过data传递参数
			success: function (res) {
				console.log(res);
			}
		})
		
		// 速写形式
		$.get('http://39.105.67.242:5588/customer/findCustomerById', {id:247}, function (res) {
			console.log(res);
		})
		
	3-post有参数（查询字符串）
                $.ajax({
			url:'http://39.105.67.242:5588/customer/query',
			method: 'post',
			data: {
				page: '1',
				pageSize: '10'
			},
			success: function (res) {
				console.log(res);
			}
		})
	
		// 简写形式
		var obj = {
			page: 1,
			pageSize: 10
                }
                $.post('http://39.105.67.242:5588/customer/query', obj, function (res) {
			console.log(res);
                })
		
	4-post有参数（JSON字符串）无简写形式
                var obj = {
			password: '123321',
			username: 'ella',
			type: 'customer'
                }
                $.ajax({
			url: 'http://39.105.67.242:5588/user/login',
			method: 'post',
			contentType: 'application/json',    // 设置请求头为JSON字符串
			data: JSON.stringify(obj),      // 将obj 转换为一个json 字符串作为参数
			success: function (res) {
				console.log(res.data.token);
			}
		})
		
2）ajaxSetup()
	用法：全局存放token
	token：
	令牌，用户信息获取token，权限区分
	$.ajaxSetup({
		headers: {
			// 存放token
		}
	})

4、全局ajax事件处理函数

ajaxStart()
ajaxStop()
// 发送请求之前触发
$(document).ajaxStart(function () {
	$('div').show();
})
// 发送请求
$.ajax({
	url: 'http://39.105.67.242:5588/comment/findAll',
	method: 'get',
	success: function (res) {
		console.log(res);
	}
})
// 发送请求之后触发
$(document).ajaxStop(function () {
	$('div').hide();
 })

5、Ajax运行原理及实现

a、创建ajax对象
    var xhr = new XMLHttpRequest();
    b、告诉Ajax对象要向哪发送请求，以什么样的方式发送请求
	1）请求方式    2）请求地址
    xhr.open('get','http://localhost:3000/first');
    c、发送请求
    xhr.send();
    d、获取服务器端响应到客户端的数据
    xhr.onload = function () {
        console.log(xhr.responseText);
    }

• 服务器端响应的数据格式
	○ 在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中
	○ 在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会转换为对象字符串进行传输
	○ JSON.parse()
• 请求参数传递
	○ 传统网站表单提交
	○ GET请求方式
		§ 请求参数的格式
		btn.onclick = function () {
	            // 创建Ajax对象
	            var xhr = new XMLHttpRequest();
	            // 获取用户在文本框中输入的值
	            var nameValue = username.value;
	            var ageValue = age.value;
	            // alert(nameValue);
	            // alert(ageValue);
	            // 参数
	            var params = 'username=' + nameValue + '&age=' +ageValue;   
	            xhr.open('get', 'http://localhost:3000/get?' + params);
	            // 发送请求
	            xhr.send();
	            // 获取服务器端响应的数据
	            xhr.onload = function () {
	                console.log(xhr.responseText);
	            }
	        }
		
		app.get('/get', (req, res) => {
		    res.send(req.query);
		})
		
	○ POST请求方式
		§ 请求参数的格式
		§ 1、application/x-www-form-urlencoded（表单格式）
			name=zhangsan&age=20&sex=男
		§ 2、application/json
			{name:'zhangsan', age:'20', sex:'男'}
			在请求头中指定Content-Type属性的值是application/json，告诉服务器端当前请求参数的格式是json
			
			JSON.stringify()           将JSON对象转换为json字符串
		§ get请求是不能提交json对象数据格式的，传统网站的表单提交也不支持json对象数据格式的，只能使用application/x-www-form-urlencoded

如何理解语义化标签

1）当没有使用css样式的时候，能够使得页面以更好的方式呈现，方便用户阅读
2）有利于SEO（搜索引擎优化）
3）有利于维护代码