复习下ajax吧!
1.创建XMLHttpRequest对象
xmlhttp=new XMLHttpRequest();
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //ie7以下
xmlhttp.open("GET","test1.txt",true); 参数 method,url,async()
xmlhttp.send();
xmlhttp.setRequestHeader(name,value);
Accept: 浏览器能够处理的内容类型。
Accept-Charset: 浏览器能显示的字符集。
Accept-Language: 浏览器当前设置的语言。
Connection: 浏览器与服务器之间连接的类型
Cookie: 当前页面设置的任何Cookie.
Host: 发出请求的页面所在的域。
Referer: 发出请求的页面的URI
User-Agent: 浏览器的用户代理字符串。
Content-type:请求数据类型
Cache-Control :指定请求响应的缓存机制
Content-Length:内容长度
Date:发送请求时间
等
xmlhttp.onreadystatechange 状态改变出发该函数
xmlhttp.readyState 状态
0 : 请求未初始化
1 : 服务器连接已建立
2 : 请求已接收
3 : 请求处理中
4 : 请求已完成
xmlhttp.status
2xx : 成功
3xx : 转向或者缓存
4xx : 未找到页面等
5xx : 服务器报错
$.ajaxSettings = { // 默认请求类型 type: 'GET', // 请求执行前的回调函数 beforeSend: empty, // 执行成功后的回调函数 success: empty, // 服务器返回错误的回调函数 error: empty, // 请求完成的回调函数 complete: empty, // 回调函数的上下文 context: null, // 是否绑定一个全局事件 global: true, // Transport xhr: function () { return new window.XMLHttpRequest() }, // 接受的类型 accepts: { script: 'text/javascript, application/javascript, application/x-javascript', json: jsonType, xml: 'application/xml, text/xml', html: htmlType, text: 'text/plain' }, // 是否是跨域 crossDomain: false, // 请求超时时间 timeout: 0, // 是否序列化 processData: true, // 是否缓存 cache: true, dataFilter: empty }
$.ajax = function(options){ var settings = $.extend({}, options || {}), deferred = $.Deferred && $.Deferred(), //检查是有延时函数,有则创建一个 urlAnchor, hashIndex
//设置默认参数 for (key in $.ajaxSettings) if (settings[key] === undefined) settings[key] = $.ajaxSettings[key] //创建Event对象,初始化ajaxStart事件,并且执行该事件 ajaxStart(settings) //检查是否跨域 if (!settings.crossDomain) { urlAnchor = document.createElement('a') urlAnchor.href = settings.url // cleans up URL for .href (IE only), see https://github.com/madrobby/zepto/pull/1049 urlAnchor.href = urlAnchor.href settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host) } if (!settings.url) settings.url = window.location.toString() //如果不存在url,直接提交到当前路径 if ((hashIndex = settings.url.indexOf('#')) > -1) settings.url = settings.url.slice(0, hashIndex) //去掉hash #后面的hash
//序列化数据,如果是get/jsonp,直接把数据绑定在url上面 serializeData(settings) var dataType = settings.dataType, hasPlaceholder = /\?.+=\?/.test(settings.url) // 查看url是否有 callback定义 如果定义了,就设置为jsonp请求 if (hasPlaceholder) dataType = 'jsonp' //如果不缓存,就在后面添加当前请求时间,每次请求不同就不会缓存 if (settings.cache === false || ( (!options || options.cache !== true) && ('script' == dataType || 'jsonp' == dataType) )) settings.url = appendQuery(settings.url, '_=' + Date.now()) //如果是jsonp,则url后面添加 &callback=? if ('jsonp' == dataType) { if (!hasPlaceholder) settings.url = appendQuery(settings.url, settings.jsonp ? (settings.jsonp + '=?') : settings.jsonp === false ? '' : 'callback=?') return $.ajaxJSONP(settings, deferred) } var mime = settings.accepts[dataType], //获取接收的数据类型 headers = { }, setHeader = function(name, value) { headers[name.toLowerCase()] = [name, value] }, protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol, //得到url协议或者当前协议 xhr = settings.xhr(), //获得xmlthttprequest对象 nativeSetHeader = xhr.setRequestHeader, //获取设置 头部信息的方法 abortTimeout if (deferred) deferred.promise(xhr) //设置延时器 if (!settings.crossDomain) setHeader('X-Requested-With', 'XMLHttpRequest') //设置当前请求为ajax 异步请求 setHeader('Accept', mime || '*/*') //设置可接收的数据类型 if (mime = settings.mimeType || mime) { if (mime.indexOf(',') > -1) mime = mime.split(',', 2)[0] xhr.overrideMimeType && xhr.overrideMimeType(mime) //设置可接收的类型 } if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
//设置提交数据的方式
//application/x-www-form-urlencode 将提交的数据进行urlencode (form表单提交的默认方式) ?name=value1&name2=value2
//multipart/form-data 数据每一条都用 boundary 分割符隔开 (form传输file文件时候 一般用这个)
//application/json 直接提交json
setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded') //设置提交方式 if (settings.headers) for (name in settings.headers) setHeader(name, settings.headers[name]) //设置头部信息 xhr.setRequestHeader = setHeader //监听 readyState 改变的函数 xhr.onreadystatechange = function(){
// 当readyState 为4 时候请求完成 if (xhr.readyState == 4) {
//清除该监听 xhr.onreadystatechange = empty clearTimeout(abortTimeout) //清除超出时间的 定时器 var result, error = false
//200-300 成功
//304 检查响应的last-modified 和 if-modified-since 如果相等 直接用本地缓存的数据
// if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) { dataType = dataType || mimeToDataType(settings.mimeType || xhr.getResponseHeader('content-type')) //接受的数据类型 script/xml/json if (xhr.responseType == 'arraybuffer' || xhr.responseType == 'blob') //二进制数据 result = xhr.response else { result = xhr.responseText //文本数据 try { // 这里是要用 setting 配置里面的 dataFilter和content 来处理数据 result = ajaxDataFilter(result, dataType, settings) if (dataType == 'script') (1,eval)(result) // (1,eval) 兼容低版本IE 其实就是eval else if (dataType == 'xml') result = xhr.responseXML //如果是xml 直接返回xml else if (dataType == 'json') result = blankRE.test(result) ? null : $.parseJSON(result) //非空的话 直接解析result } catch (e) { error = e } if (error) return ajaxError(error, 'parsererror', xhr, settings, deferred) //错误,调用setting里面error } ajaxSuccess(result, xhr, settings, deferred) //调用成功函数 } else { ajaxError(xhr.statusText || null, xhr.status ? 'error' : 'abort', xhr, settings, deferred) //错误,调用setting里面的error } } } //如果在 setting 的before函数中 返回false 直接返回,断开请求 if (ajaxBeforeSend(xhr, settings) === false) { xhr.abort() ajaxError(null, 'abort', xhr, settings, deferred) return xhr } var async = 'async' in settings ? settings.async : true
//创建一个请求 xhr.open(settings.type, settings.url, async, settings.username, settings.password) //添加请求字段信息 if (settings.xhrFields) for (name in settings.xhrFields) xhr[name] = settings.xhrFields[name] //nativeSetHeader 设置头部信息 xhr.setRequestHeader(name,value) for (name in headers) nativeSetHeader.apply(xhr, headers[name]) //headers[name] ->[name,value] // 超时后执行 if (settings.timeout > 0) abortTimeout = setTimeout(function(){ xhr.onreadystatechange = empty xhr.abort() ajaxError(null, 'timeout', xhr, settings, deferred) }, settings.timeout) // 发送数据返回,当前xmlHttpRequrest对象 xhr.send(settings.data ? settings.data : null) return xhr }
这个是主要的对象ajax的封装。
代码仅供参考,具体功能可以自己扩展。
http://www.cnblogs.com/jiebba/p/6529854.html
http://www.cnblogs.com/jiebba 我的博客,来看吧!
如果有错误,请留言修改下 哦!