十八、Ajax

最新推荐文章于 2020-09-27 20:04:20 发布

「已注销」

最新推荐文章于 2020-09-27 20:04:20 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 后端 ViewUI

原文链接：https://juejin.im/post/5bf639b86fb9a049ac78c95d

本文详细介绍了Ajax的工作原理，包括其特点、使用方法以及如何通过JavaScript与服务器进行数据交换，更新网页内容，无需刷新整个页面。同时，探讨了跨域请求、权限问题及XMLHttpRequest的高级用法。

@(HTML5)[HTML 5 Ajax]

[toc]

十八、Ajax

@(HTML5)[HTML 5 Ajax]

ajax 的特点

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

ajax的使用

// 1、创建一个 Ajax 对象
// var xhr = new XMLHTTPRequest();
var xhr;
if (window.XMLHttpRequest){ 
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 
  xhr = new XMLHttpRequest();
}else{ 
// IE6, IE5 浏览器执行代码 
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2、监听事件。状态值发生变化时改变
xhr.onreadystatechange = function(){
  if (xhr.readyState === 4 && xhr.status === 200) {
          alert(xhr.responseText)
  }
}
// 3、请求方式
// xhr.open(方式，地址，是否异步)
xhr.open("GET","RUL",true)
// 4、发送请求
xhr.send()
复制代码

在标准浏览器下，XMLHttpRequest已经升级了，可以支持很多的一些特性 a)可以跨域，在同一服务器下访问不同的域，跟正常的AJax请求过程一样，但需要后端配合 b)权限问题,后端请求头要允许你访问的域 ⑥ header(‘Access-Control-Allow-Origin:http://www.域名.com’)
XMLHttpRequest增加了很多功能 c) 规范不推荐使用 onreadystatechange 事件监听状态值，它推荐使用onload
IE8+浏览器如果想实现跨域请求，则需要使用另外一个对象实现

d) 创建对象 var xhr = new XDomainRequest( ) 过程跟之前一样 [ msdn.microsoft.com/library/cc2… ] [ xhr.spec.whatwg.org/ ]

ajax上传 FormData

var oFormData = new FormData();
console.log(oFormData);
// 设置一个键值对
oFormData.append("file", oFile.files[0])
xhr.send(oFormData);
复制代码