[JavaScript知识库]3分钟带你了解ajax请求

ajax是什么：

• 英文翻译 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,就是异步的JavaScript。
  

ajax解决了什么问题：

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

原生ajax

 function ajax1(url) {
	 //所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
    const xhr = new XMLHttpRequest();
    //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
	xhr =new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open('get', url, false);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4&&xhr.status == 200) {
      /*
       xhr.readyState的值
     	0: 请求未初始化
		1: 服务器连接已建立
		2: 请求已接收
		3: 请求处理中
		4: 请求已完成，且响应已就绪
		xhr.status http状态码
      */
      console.log(xhr.responseText)//请求返回的的数据
      }
    }
    xhr.send(null)
  }

jquery的ajax

	    $(function(){
        //请求参数
        var list = {};
        //
        $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "http://127.0.0.1/admin/list/",
            //数据，json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });

向服务器发送请求

	 xhr.open(method, url, async);

• method请求方式，get或者post,
• url，请求地址，
• async 值为true或者false，同步或者异步。
• send将请求发送到服务器，仅用于POST 请求。
• post请求 设置如下

	 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	 xhr.send('a=b&b=c');

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

• 不愿使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠