AJAX(一)——初识AJAX

什么是AJAX

AJAX是无需重新加载整个页面的前提下 , 更新部分页面
AJAX = 异步 JavaScript 和 XML

优缺点

优点 :

• 不需要插件的⽀持，原⽣ js 就可以使⽤
• ⽤户体验好（不需要刷新⻚⾯就可以更新数据）
• 减轻服务端和带宽的负担

缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到

创建对象

使用AJAX 我们要创建XMLHttpResquest对象
var xhr = new XMLHttpResquest()

• 对象方法
  
• 对象属性
  

发送请求

open和send方法

• open(method , url , async)

1. method : GET , POST , PUT , DELETE
2. url :文件在服务器上的位置
3. async : true false true是异步 false是同步

GET , POST , PUT , DELETE

• Get: 一般用于从服务器上获取数据 , 推过去的少 , 拿过来的多 , 一般用URL问号传参的方式传递数据
  open('GET' ,'https://music.benwebsite.cloud/banner?type=2' , true )
• Post:一般用于向服务器上传数据 , 推过去的多 , 拿过来的少 , 一般使用请求主体的形式传递数据
  open('POST' ,'https://music.benwebsite.cloud/banner' , true )
send('{type : 2}')
• Put : 一般用于向服务器上传资源文件(图片数据) , 传递数据方法和post一样
• Delete: 用于删除服务器上的资源数据 , 传递数据方法和get一样

GET 与 POST主要区别

• 大小问题: get传递给服务器内容的大小受限制 , post理论上不受限制 , 但一般控制在2M
• 缓存问题 ; get请求会有缓存 , post没有缓存 , 但在项目中 , 一般不会让get有缓存 , 所以用一个随机数清除缓存
  xhr.open('get','https://music.benwebsite.cloud/banner?type=2'+Math.random())
• 安全性问题: post比get安全
• get一般产生一个数据包 (浏览器把请求的内容一块发过去), post 产生两个数据包(浏览器先发送header , 服务器响应 , 浏览器再发送data , 浏览器再响应)

GET or POST

1. 当不能使用缓存数据时 (更新服务器上的文件或数据库)
2. 传送大量数据时
3. 发送含未知字符的用户输入
   我们用POST

true OR false
true表示异步 false表示同步
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true
为true时 , 通过 AJAX，JavaScript 无需等待服务器的响应，
而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注意：当您使用 async=false 时，请不要编写 onreadystatechange() 函数 - 把代码放到 send() 语句后面即可

• send(string)
  string只能是POST请求

如果需要像 HTML 表单那样 POST 数据，我们用 setRequestHeader()方法来来添加 HTTP 头。然后在 send()方法中规定你希望发送的数据。
用 setHttpHeader(header, value)
header 头名
value 头值

xmlhttp.open("POST", "https://music.benwebsite.cloud/banner", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname = Bill & lname = Gates");

原生写请求方法

• GET方法

function getAjax() {
	var xhr = new XMLHttpResquest();
	xhr.open('GET' , 'https://music.benwebsite.cloud/banner?type=2' , true); //url是后端给的
	xhr.send();
	console.log(xhr);
}

• POST方法

function postAjax() {
	var xhr = new XMLHttpRequest();
	xhr.open('POST' , 'https://music.benwebsite.cloud/banner' , true);
	xhr.requestHeader('content-type' , 'application/json'); //设置请求头 键值对形式 
	var sendData = {type : 2}; // 参数
	xhr.send(JSON.stringify(sendData));
	console.log(xhr);
}

• PUT方法

function putAjax() {
	var xhr = new XMLHttpRequest();
	xhr.open('PUT' , 'https://music.benwebsite.cloud/banner' , true);
	xhr.requestHeader('content-type' , 'application/json'); //设置请求头 键值对形式 
	var sendData = {type : 2}; // 参数
	xhr.send(JSON.stringify(sendData));
	console.log(xhr);
}

• DELETE方法

function deleteAjax() {
	var xhr = new XMLHttpResquest();
	xhr.open('DELETE' , 'https://music.benwebsite.cloud/banner?type=2' , true); //url是后端给的
	xhr.send();
	console.log(xhr);
}

响应

responseText 和responseXML属性

获得来自服务器的响应，
XMLHttpRequest 的responseText 和responseXML属性

• responseText获得字符串形式的响应数据。返回字符串形式的响应
  这样使用:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

• responseXML获得 XML 形式的响应数据。

AJAX的onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

1. readyState 包含XMLHttpRequest的状态
   0: 未初始化
   1 :已建立服务器联系
   2 :已发送
   3 :已接收
   4 : 已完成 准备就绪
   当readyState改变时
2. 触发onreadystatechange事件
3. status : 比如404 200

例子:

function myFunction() {
	var xhr = new XMLhttpRequest();
	xhr.open('GET', 'https://music.benwebsite.cloud/banner?type=2' , true);
	xhr.send();
	xhr.onreadystatechange=function()
	{
    	if (xmlhttp.readyState==4 && xmlhttp.status==200)
   		{
        	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    	}
	}
}