javascript之ajax运用及跨域解决.pdf

目 录 原生ajax基础性原理 XMLHttpRequest Get_and_Post 封装ajax 跨域原理与解决 跨域原理 跨域解决 CORS解决跨域 JSONP解决跨域 图像Ping解决跨域 Websocket解决跨域 解决跨域 window.postMessage解决跨域 frame解决跨域 代理解决跨域 跨域解决实例 CORS解决跨域demo JSONP解决跨域demo 代理解决跨域demo 本文档使用 看云 构建 - 2 - 原生ajax基础性原理 原生ajax基础性原理 原生ajax基础性原理 2005 年 Jesse James Garrett 发表了一篇文章 ，标题为 ：“Ajax ：A new Approach to Web Applications”。 他在这篇文章里介绍了一种技术 ，用他的话说 ，就叫 ：Ajax ，是 Asynchronous JavaScript + XML 的简写。这 种技术能够想服务器请求额外的数据而无须卸载页面(即刷新) ，会带来更好的用户体验。一时间 ，席卷全球。 目录 XMLHttpRequest Get_and_Post 封装ajax 本文档使用 看云 构建 - 3 - XMLHttpRequest XMLHttpRequest 一. XMLHttpRequest 1. 兼容式构建XMLHttpRequest对象 ： //兼容式创建XMLHttpRequest对象 function createXHR() { if(XMLHttpRequest ! undefined) { return new XMLHttpRequest(); } else if(ActiveXObject ! undefined) { var versions [ 'MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ]; for(var i 0; i < versions.length; i++) { try { return new ActiveXObject(versions[i]); } catch(e) { //跳过 } } } throw new Error('您的浏览器不支持XHR对象 '); } 2. 如何通过获取的XMLHttpRequest对象进行ajax请求 ： 调用XHR对象的open方法激活一个请求以备发送 ，它接受三个参数 ：要发送的请求类型(get、post)、请求 的URL和表示是否异步。 比如 ：xhr.open('get', url, false);//url为请求的后台服务器接口地址 通过send方法发送请求 ，send方法接受一个参数作为请求主体发送的数据。如果不需要 ，则必须填null ，故 而一般常见的形式是 ： get请求 ：xhr.send(null); post请求 ：xhr.send(data); 3. 服务器对ajax请求进行响应 ，并将响应的数据填充进XHR对象中 ，以下是返回的四个属性 ： 属性名 说明 responseText 作为响应主体被返回的文本