首页 > 代码库 > AJAX笔记
AJAX笔记
1、AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）。
AJAX的核心是XMLHttpRequest，完整的ajax请求过程：
1、创建xmlHttpRequest对象，它是Javascript对象，拥有处理浏览器与服务器间数据交互所要用到的属性和方法，主流浏览器都支持IE支持Activex
2、open()初始化对象
3、send()发送到服务器
4、ready state跟踪状态
JSON：javascript对象表示法，请求常用数据返回格式；
JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。
JSON是独立于语言的，也就是说不管什么语言，都可以解析JSON，只需要按照JSON的规则来就行。
JSON的长度和xml格式比起来很短小，JSON的读写速度更快；
JSON可以使用javascript内建的方法直接进行解析，转换成javascript对象，非常方便。
2、JSONP：
由于浏览器同源策略，当协议、子域名、主域名、端口号中的任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算做跨域。Javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。jsonp可用于解决主流浏览器的跨域数据访问的问题。
当跨域请求时，一般都会看到这个错误：XMLHttpRequest cannot load http://xxx.com/xx/. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://localhost‘ is therefore not allowed access.
JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了
script 标签可以跨域请求的特性，由其 src 属性发送请求到服务器，服务器返回 JavaScript 代码，浏览器接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。JSONP由两部分组成：
回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，但客户端和服务器端的名称一定要一致）。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回。 JSONP的请求过程：
- 请求阶段：浏览器创建一个
script标签，并给其src赋值(类似http://example.com/api/?callback=jsonpCallback）。 - 发送请求：当给
script的src赋值时，浏览器就会发起一个请求。 - 数据响应：服务端将要返回的
数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: ‘abc‘})”)返回。当浏览器接收到了响应数据，由于发起请求的是script，所以相当于直接调用jsonpCallback方法，并且传入了一个参数。
因为
script 标签的 src 属性只在第一次设置的时候起作用，导致 script 标签没法重用，所以每次完成操作之后要移除；3、封装ajax() 方法
function ajax(params) { params = params || {}; params.data = http://www.mamicode.com/params.data || {}; var json = params.jsonp ? jsonp(params) : json(params); // ajax请求 function json(params) { params.type = (params.type || ‘GET‘).toUpperCase(); params.data = http://www.mamicode.com/formatParams(params.data); var xhr = null; // 实例化XMLHttpRequest对象 if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { // IE6及其以下版本 xhr = new ActiveXObjcet(‘Microsoft.XMLHTTP‘); }; // 监听事件 xhr.onreadystatechange = function() { if(xhr.readyState == 4) { var status = xhr.status; if(status >= 200 && status < 300) { var response = ‘‘; var type = xhr.getResponseHeader(‘Content-type‘); if(type.indexOf(‘xml‘) !== -1 && xhr.responseXML) { response = xhr.responseXML; //Document对象响应 } else if(type === ‘application/json‘) { response = JSON.parse(xhr.responseText); //JSON响应 } else { response = xhr.responseText; //字符串响应 }; params.success && params.success(response); } else { params.error && params.error(status); } } }; // 连接和传输数据 if(params.type == ‘GET‘) { xhr.open(params.type, params.url + ‘?‘ + params.data, true); xhr.send(null); } else { xhr.open(params.type, params.url, true); //设置提交时的内容类型 xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset=UTF-8‘); xhr.send(params.data); } } // jsonp请求 function jsonp(params) { //创建script标签并加入到页面中 var callbackName = params.jsonp; var head = document.getElementsByTagName(‘head‘)[0]; // 设置传递给后台的回调参数名 params.data[‘callback‘] = callbackName; var data = http://www.mamicode.com/formatParams(params.data); var script = document.createElement(‘script‘); head.appendChild(script); //创建jsonp回调函数 window[callbackName] = function(json) { head.removeChild(script); clearTimeout(script.timer); window[callbackName] = null; params.success && params.success(json); }; //发送请求 script.src = http://www.mamicode.com/params.url + ‘?‘ + data; //超时处理 if(params.time) { script.timer = setTimeout(function() { window[callbackName] = null; head.removeChild(script); params.error && params.error({ message: ‘超时‘ }); }, time); } }; //格式化参数 function formatParams(data) { var arr = []; for(var name in data) { arr.push(encodeURIComponent(name) + ‘=‘ + encodeURIComponent(data[name])); }; // 添加一个随机数，防止缓存 arr.push(‘v=‘ + random()); return arr.join(‘&‘); } // 获取随机数 function random() { return Math.floor(Math.random() * 10000 + 500); }}
模拟请求
ajax({ url: ‘test.php‘, type: ‘GET‘, data: {‘intro‘: ‘get请求‘}, success:function(res){ res = JSON.parse(res); document.getElementById(‘a‘).innerHTML = res.intro; console.log(res); } }); ajax({ url: ‘test.php‘, type: ‘POST‘, data: {‘intro‘: ‘post请求‘}, success:function(res){ res = JSON.parse(res); document.getElementById(‘b‘).innerHTML = res.intro; console.log(res); } }); ajax({ url: ‘test.php‘, jsonp: ‘jsonpCallback‘, data: {‘intro‘: ‘jsonp请求‘}, success:function(res){ document.getElementById(‘c‘).innerHTML = res.intro; console.log(res); } });
4、jquery.ajax()参数
type：请求方式 GET/POST
url:请求地址
async:布尔类型，默认为true 表示请求是否为异步，如果为false表示为同步。
dataType：返回的数据类型
jsonp：传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success：调用成功执行的函数
error：异常处理函数
AJAX笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。