原生Ajax和jQuery的Ajax

概要

AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

原生AJAX

原生ajax的五个步骤

<script>
	var xhr = new XMLHttpRequest(); //创建一个异步对象
	xhr.open("Get"，"test.ashx"， true);//Get方式括号中的三个参数分别为：1.发送请求的方式 2.样请求的页面 3.是否异步
	//xhr.open("post"，"test.ashx"，true);
	//xhr.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded"); Post方式发送数据
	//这个回调函数主要用来检测服务器是否把数据返回给异步对象
	xhr.setRequestHeader("If-Modified-Since"，"0");//设置浏览器不使用缓存
	xhr.onreadystatechange = function () {
		if (xhr.readystate == 4 && xhr.status == 200) {
			console.log(xhr.responseText);//服务器返回的Response数据
		}
	}
	xhr.send();//异步对象发送请求
</script>

readyState：服务器响应的状态信息
0：请求未初始化。对象已经创建，但还未初始化，即还没调用open方法；
1：服务器连接已建立。对象已经创建并初始化，但还未调用send方法；
2： 请求已接收。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：请求处理中。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4： 请求已完成，且响应已就绪。所有数据接收完毕
status返回当前状态码
1xx-：（临时响应）
表示临时响应并需要请求者继续执行操作的状态代码。
2xx-： 服务器成功返回网页
3xx -：重定向）
表示要完成请求，需要进一步操作。
4xx -： （请求错误）
这些状态代码表示请求可能出错，妨碍了服务器的处理。
5xx-:服务器错误）
这时候可能是后台的数据发生错误

原生ajax解决跨域

要了解什么是跨域？我们首先要知道什么是同源。

同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

同源即：协议名和端口号以及主机名都相同。
当协议名主机名以及端口号有一个或多个不相同，就会违背同源策略，请求无法成功，这就需要进行跨域请求

解决跨域请求的方法

1.JSONP解决跨域

实现原理：　
动态创建一个script标签，由于script标签的src属性带有跨域的功能，所以利用这一特性，可以实现跨域。

<script type="text/javascript">
       function callback(data){
              console.log(data); 
       }
</script>
<script src="data.php"></script>

2.CORS(跨域资源共享)

用php进行的设置，header{"Access-Control-Allow-Origin： "}，“”号表示允许任何域向我们的服务端提交请求

	header("Access-Control-Allow-Origin:*");　

jQuery的ajax

<script>
      $.ajax({
        type: "post",
        //type : "get",
        data: { 
          "name":"",
          "age":"",
         },
        url: "../../api/addCategory.php",

        // 是响应体成功时执行的函数
        success: function (obj) {
          console.log(obj);

        },
        dataType: "json",
        // 请求发生错误的时候  出发的函数
        error: function () {
          console.log("error");
        }
      })
    })
</script>