## 原生js发送ajax请求原理 ### AJAX是什么? 　　AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 　　ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 　　ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 　　ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。 　　ajax的应用使用支持以上技术web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。 　　ajax前景非常乐观，可以提高系统性能，优化用户界面。AJAX现有直接框架AjaxPro，可以引入AjaxPro.2,可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出现相关控件。 　　ajax的优点： 　　1、最大的一点是页面无刷新，用户的体验非常好。 　　2、使用异步方式与服务器通信，具有更加迅速的响应能力。。 　　3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。 　　4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。 　　5、ajax可使因特网应用程序更小、更快，更友好。 　　ajax的缺点： 　　1、ajax不支持浏览器back按钮。 　　2、安全问题 AJAX暴露了与服务器交互的细节。 　　3、对搜索引擎的支持比较弱。 　　4、破坏了程序的异常机制。 　　5、不容易调试。 ### 原生ajax的实现方式 **1,实例化AJAX对象** ``` // XMLHttpRequest对象用于在后台与服务器交换数据, //IE浏览器:new ActiveXObject("Microsoft.XMLHttp"); //其他：new XMLHttpRequest(); var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); ``` **2,定义post/get请求 ** 拿到XMLHttpRequest之后，使用open()方法去请求链接 ``` open语法：open(method, url, async, username, password); method: 请求类型（GET | POST | HEAD） url： 请求主体，大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。 async: 是否发送异步请求( false | true ) username,password: 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。 ``` ``` var Ajax = { get: function (url, fn) { // XMLHttpRequest对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); //每当readyState改变时就会触发onreadystatechange函数 //0: 请求未初始化 //1: 服务器连接已建立 //2: 请求已接收 //3: 请求处理中 //4: 请求已完成，且响应已就绪 xhr.open('GET', url, true) xhr.onreadystatechange = function () { //readyStatus == 4说明请求已经完成 if(xhr.readyState == 4 && xhr.status ==200) { //从服务器获得数据 fn.call(this, xhr.responseText); } }; //发送数据 xhr.send(); }, // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式 post: function (url, data, fn) { var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); // 添加http头，发送信息至服务器时内容编码类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { fn.call(this, xhr.responseText); } }; //发送数据 xhr.send(data); } } ``` **3，用法** ``` url:请求路径 data:参数 Ajax.get('url','data‘,function(data){ console.info(data) }) post请求，把get换成post ```