原生js的ajax请求

什么是ajax

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

传统方法的缺点：

　　传统的web交互式用户触发一个http请求服务器，然后服务器在收到之后，在做出响应到用户，并且返回一个新的页面，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了很多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢的多。

XMLHttpRequest对象

　　XmlHttpRequest对象是ajax的基础，XMLHttpRequest用于在后台与服务器交换数据。这意味着可以不重新加载整个网页的情况下，对网页的某部分进行跟新。目前所有的浏览器都支持XMLHttpRequest

五部使用法：

　　1.创建XMLHTTPRequest对象

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

　　3.设置发送的数据，开始和服务器端交互。

　　4.注册事件

　　5.更新界面

get请求和post请求的例子

　　　　get请求

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open(‘get‘,‘getStar.php?starName=‘+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
??if (ajax.readyState==4 &&ajax.status==200) {
???//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
?　　}
}

　　　　　post请求

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

为了方便实用，我们可以把它封装进方法里面，要用的时候，直接调用就可以了。

function ajax_method(url,data,method,success) {
???// 异步对象
???var ajax = new XMLHttpRequest();

???// get 跟post ?需要分别写不同的代码
???if (method==‘get‘) {
???????// get请求
???????if (data) {
???????????// 如果有值
???????????url+=‘?‘;
???????????url+=data;
???????}else{

???????}
???????// 设置 方法 以及 url
???????ajax.open(method,url);

???????// send即可
???????ajax.send();
???}else{
???????// post请求
???????// post请求 url 是不需要改变
???????ajax.open(method,url);

???????// 需要设置请求报文
???????ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

???????// 判断data send发送数据
???????if (data) {
???????????// 如果有值 从send发送
???????????ajax.send(data);
???????}else{
???????????// 木有值 直接发送即可
???????????ajax.send();
???????}
???}

???// 注册事件
???ajax.onreadystatechange = function () {
???????// 在事件中 获取数据 并修改界面显示
???????if (ajax.readyState==4&&ajax.status==200) {
???????????// console.log(ajax.responseText);

???????????// 将 数据 让 外面可以使用
???????????// return ajax.responseText;

???????????// 当 onreadystatechange 调用时 说明 数据回来了
???????????// ajax.responseText;

???????????// 如果说 外面可以传入一个 function 作为参数 success
???????????success(ajax.responseText);
???????}
???}

}

原生js的ajax请求

原文地址：https://www.cnblogs.com/mz-2015/p/9281934.html