@(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()

2. 在标准浏览器下，XMLHttpRequest已经升级了，可以支持很多的一些特性
   a)可以跨域，在同一服务器下访问不同的域，跟正常的AJax请求过程一样，但需要后端配合
   b)权限问题,后端请求头要允许你访问的域
   ⑥ header(‘Access-Control-Allow-Origin:http://www.域名.com’)

3. XMLHttpRequest增加了很多功能
   c) 规范不推荐使用 onreadystatechange 事件监听状态值，它推荐使用onload

4. IE8+浏览器如果想实现跨域请求，则需要使用另外一个对象实现

   d) 创建对象 var xhr = new XDomainRequest( ) 过程跟之前一样
   [ https://msdn.microsoft.com/library/cc288060(v=vs.85).aspx ]
   [ https://xhr.spec.whatwg.org/ ]

ajax上传 FormData

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