原生JavaScript实现Ajax异步请求(2)

日期：2020-05-11 栏目：程序人生浏览：次

上面的代码中有详细的注释，ajax的原理很简单，总的来说就是使用XMLHttpRequest对象来发送数据。这儿对这个对象进行补充说明。

XMLHttpRequest对象的基本属性

readyState属性有五个状态值：

0：是uninitialized：未初始化。已经创建了XMLHttpRequest对象但是未初始化。
1：是loading：已经开始准备好要发送了。
2：是loaded,：已经发送，但是还没有收到响应。
3：是interactive：正在接受响应，但是还没接收完。
4：是completed：接受响应完毕。
responseText：服务器返回的响应文本。只有当readyState>=3的时候才有值。当readyState=3，返回的响应文本不完整，只有readyState=4，接收到完整的响应文本。

responseXML：响应信息是xml，可以解析为Dom对象。

status：服务器的Http状态码，若是200，则表示OK，404，表示为未找到。

statusText：服务器http状态码的文本。比如OK，Not Found。

XMLHttpRequest对象的基本方法

open（method，url，asyn）：打开XMLHttpRequest对象。其中method方法有get，post，delete，put。url是请求资源的地址。第三个参数表示是否使用异步。默认情况是true，因为Ajax的特点就是异步传送。若使用同步则false。

send（body）：发送请求Ajax。其中发送的内容可以是需要的参数，若是没有参数，直接send（null)

使用方法

直接调用上面定义的ajax函数，传送相应的选项和参数即可。

ajax({
  url: '/post.php',
  data: {
    name: 'uusama',
    desc: 'smart'
  },
  method: 'GET',
  success: function(ret) {
    console.log(ret);
  }
});

跨域请求问题

使用ajax请求的时候，一定要注意一个问题：跨域请求。

在没有使用特殊手段的情况下，跨域请求：请求其他域名和端口下的URL资源的时候，会报 Access-Control-Allow-Origin 相关的错误。其主要原因是浏览器的同源策略限制，浏览器规定不能跨域请求资源。

解决办法

下面简单的提一下一些解决方案。

在ajax头部添加允许跨域请求的header，这种方式还需要服务端配合添加允许跨域请求的头部才可以。下面是PHP添加允许POST请求跨域头部的PHP示例：

// 指定允许其他域名访问 
header('Access-Control-Allow-Origin:*'); 
// 响应类型 
header('Access-Control-Allow-Methods:POST'); 
// 响应头设置 
header('Access-Control-Allow-Headers:x-requested-with,content-type');

使用动态scrpit标签，动态创建一个scrpit标签并指向请求的地址的方法，也就是JSONP方式，需要在URL后面拼接一个回调函数，标签加载成功以后会调用回调函数。

原生JavaScript实现Ajax异步请求(2)

相关推荐