js-AJAX

AJAX

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

谈谈Ajax

• AJAX是异步的JavaScript和XML;

• AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;

• AJAX是一种独立于Web服务器软件的浏览器技术;

• AJAX不是一种新的编程语言，而是一种技术;

• AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后台交互）;

• AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。

XMLHttpRequest

XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

实现步骤：

1.创建XMLHTTPRequest对象

var xhr = new XMLHttpRequest();

2.使用open方法设置和服务器的交互信息open()

xhr.open('请求方法',url)
//请求方法取值：GET/POST/HEAD/DELETE/OPTIONS/PUT 

3.设置requestHeader()

//语法
xhr.setRequestHeader(属性名称, 属性值);

//常用的数据格式(编码可带可不带)

1. 发送纯文本(不指定Content-type时，此是默认值)
xhr.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

2.发送json格式数据
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');

3.发送表单数据
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
    
4.发送html文本
xhr.setRequestHeader('Content-type', 'text/html; charset=utf-8');

4.设置发送的数据，开始和服务器端交互 send()

请求主体内容，如果没有，为null，或者省略。
xhr.send(); //调用send()之后,请求就会发送到服务器

5.取得响应，注册事件

• responseText：作为响应体返回的文本。
• status：响应的 HTTP 状态。
• readyState：返回HTTP请求状态 4代表响应完成
• readystatechange 请求状态改变事件

6.如果请求完成，并且响完成，可以获取到响应数据

7.响应解码

常用get请求使用

1.get无参请求

<script>
    // 1.创建XMLHttpRequest对象
	var xhr=new XMLHttpRequest()
    // 2.使用open方法设置和服务器的交互信息    
	xhr.open('get','http://47.93.206.13:8002/index/findAllCategory')
    // 3.如果默认可不设置requestHeader
    // 4.发送请求
	xhr.send()
    // 5.取得响应
	xhr.onreadystatechange=function(){
        //6. 如果请求完成，并且响应完成
		if(xhr.readyState===4&&xhr.status===200){
            //7.，获取到响应数据
			console.log(xhr.responseText);
		}
	}
</script>

2.get有参请求

// 参数序列化 引入QS序列化工具
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
<script>
        var qs=Qs;
        var xhr=new XMLHttpRequest();
        var obj={
            page:1,
            pageSize:10
        }
        // 转换为字符串
        // console.log(qs.stringify(obj));
        xhr.open('get','http://47.93.206.13:8002/index/pageQueryArticles'+'?'+qs.stringify(obj))
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
</script>

3.post有参请求

<script>
        var xhr = new XMLHttpRequest();
        xhr.open('post', 'http://47.93.206.13:8002/user/login');
        var obj={
            username:'admin1',
            password:123321
        }
        // 设置请求头
        xhr.setRequestHeader('Content-Type','application/json')
        xhr.setRequestHeader('Authorization','token') 
        // 将对象转换为json格式
        xhr.send(JSON.stringify(obj));
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&xhr.status===200){
                console.log(xhr.responseText);
            }
        }
</script>