JavaScript-原生Ajax

        在前端开发中，在传统的网络请求方式是form表单，通过submit事件实现数据加载，但由于form表单请求方式是采用的同步响应模式，即：一次HTTP请求对应一个新的页面，每次请求都会丢弃当前页面来重新加载新页面；这导致频繁的页面刷新让客户处于一种不连续的状态，也使服务器的负担加重。为了实现局部数据加载，引入了Ajax技术，即异步 JavaScript和XML。今天我们来了解一下Ajax的Get和POST请求。

Get和POST的区别

1.get传送数据较小，不能大于2KB。post数据量较大，一般被默认为不受大小限制。但理论上，HS4中最大量为80KB，HS5最大为100KB。

2.post请求必须设置Content-Type值为application/x-form-www-urlencoded

3.发送请求时,因为get请求的参数都在url里（这也导致get安全性低）,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

4.性能方面get请求优于post

---

Ajax实现原理

        Ajax的原理简单来说通过浏览器的javascript对象XMLHttpRequest(Ajax引擎)对象向服务器发送异步请求并接收服务器的响应数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。即用户的请求间接通过Ajax引擎发出而不是通过浏览器直接发出，同时Ajax引擎也接收服务器返回响应的数据，所以不会导致浏览器上的页面全部刷新。如图

Ajax实现代码

Ajax执行步骤：

1、创建XMLHttpRequest对象

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

3、通过XMLHttprequest向服务器发送请求

4、创建回调函数，监视服务器的响应状态，即：在服务器响应完成之后，回调函数启动！

5、页面的更新---回调函数通过DOM动态的更新HTML(JSP)页面。

原生Ajax-get请求

//步骤一:创建异步对象
var ajax = newXMLHttpRequest();
//步骤二:设置请求的信息
//open三个参数说明：
//1--提交请求的方式(字符串)
//2--发送请求的目标url(处理请求的后台)，请求的参数在url后加？链接
//3--是否异步请求---true表示是异步请求,默认值true
ajax.open('get','getStar.php?starName='+name,true);
//步骤三:发送请求，不需要传参
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange= function () {
//服务器的状态----readyState
//(0--请求对象未初始化、1--开始发送不请求、2--请求发送完成、3--读取服务器的响应、4--读取服务器响应结束)
//服务器响应返回的状态码---status
//200--ok、404--未找到页面、304--缓存、403--没有权限、500--服务器级别错误
   if (ajax.readyState==4&&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
  　　}
}

原生Ajax-post请求

//创建异步对象 
var xhr = newXMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//post请求和get不同的是url后面不带数据参数
xhr.open('post', '02.post.php' ,true);
//发送请求，需要传参
xhr.send('name=fox&age=18');
xhr.onreadystatechange= function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status== 200) {
    console.log(xhr.responseText);
  }
};