您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息
三六零分类信息网 > 贺州分类信息网,免费分类信息发布

Ajax和跨域问题深入解析_AJAX相关

2024/3/26 21:28:24发布33次查看
这篇文章主要为大家详细介绍了ajax和跨域问题,告诉大家什么ajax,什么是跨域?具有一定的参考价值,对感兴趣的小伙伴们可以参考一下
什么是ajax
ajax(asynchronous javascript and xml),是一种可以向服务器请求额外的数据并且无需刷新页面的技术,ajax的出现带来了更好的用户体验.
ajax的核心就是xmlhttprequest(xhr)对象.xhr为向服务器发送请求和解析服务器响应提供了流畅的接口.可以使用xhr对象获取新数据,通过dom将新数据插入到页面.虽然名字中包含xml,但是ajax通信和数据格式无关;这种技术就是可以不用刷新就从服务器获取数据,但是不一定是xml数据,也可以是json.
xmlhttprequest对象
xhr的用法
1.创建一个xmlhttprequest对象
2.发送请求
1).设置请求行 xhr.open()
2).post请求需要设置请求头 xhr.setrequestheader() post请求头content-type的值: application/x-www-form-urlencoded
3).设置请求体 xhr.send() get请求传null,post根据情况
3.处理服务器响应
先判断响应状态码和异步对象是否解析完毕.
服务器返回的状态码 status
1xx:消息
2xx:成功
3xx:重定向
4xx:请求错误
5xx:服务器错误
异步对象的状态码 readystate
0:异步对象已经创建
1:异步对象初始化完成,发送请求
2:接收服务器返回的原始数据
3:数据正在解析,解析需要时间
4:数据解析完成,数据可以使用了
xml
xml的特点,出身名门,w3c制定,微软和ibm曾经共同大力推荐过的数据格式.xml 指可扩展标记语言(extensible markup language),被设计用来传输和存储数据,html 是设计用来表示页面的.
语法规则:和html差不多,都是通过标记来表示的
特殊符号:比如a8093152e673feb7aba1828c43532094要使用实体-转移字符
xml的解析需要前后台配合:
1.后台在返回的时候,在响应头中设置content-type的值为 application/xml
2.前台异步对象在接收后台数据时,记得按照xml的方式来接收,xhr.responsexml,并且它返回的是一个object对象,内容是#document
json
json(javascript object notation),出身草根,是 javascript 的子集,专门负责描述数据格式.json本身是一个特殊格式的字符串,可以转换成js对象,是网络上用来传输数据使用最广泛的数据格式,没有之一.
语法规则:数据以 key/value 值对表示,数据由逗号分隔,大括号保存对象,中括号保存数组,名称和值都需要使用双引号包含(这个是和js的一点小区别).
js中解析/操作json:
1.json.parse(json字符串); 将一个json格式的字符串解析成js对象
2.json.stringify(js对象); 将一个js对象转成一个json格式的字符串
自己封装一个ajax
function pinjiedata(obj) { //obj 就相当于 {key:value,key:value} //最终拼接成键值对的字符串 "key:value,key:value" var finaldata = ""; for(key in obj){ finaldata+=key+"="+obj[key]+"&"; //key:value,key:value& } return finaldata.slice(0,-1);//key:value,key:value } function ajax(obj) { var url = obj.url; var method = obj.method.tolowercase(); var success = obj.success; var finaldata = pinjiedata(obj.data); //finaldata最终的效果key:value,key:value //1.创建xhr对象 var xhr = new xmlhttprequest(); //get方法拼接地址,xhr.send(null) if (method=='get'){ url = url + "?"+finaldata; finaldata = null; } //2.设置请求行 xhr.open(method,url); // 如果是post请求,要设置请求头 if (method=='post'){ xhr.setrequestheader("content-type","application/x-www-form-urlencoded") } //3.发送 xhr.send(finaldata); //4.监听服务器返回的数据 xhr.onreadystatechange = function () { if (xhr.status==200 && xhr.readystate==4){ var result = null; //获取返回的数据类型 var rtype = xhr.getresponseheader("content-type"); if (rtype.indexof('xml')!=-1){ result = xhr.responsexml; }else if(rtype.indexof('json')!=-1){ // json.parse 的意思是 将 json格式的字符串 //比如 [{ "src":"./images/nav0.png","content":"商品分类1"}] //转成js对象 result = json.parse(xhr.responsetext); }else{//当成普通的字符串去处理 result = xhr.responsetext; } //将这里解析好的数据交给页面去渲染 success(result); } } }
jquery中使用ajaxapi jquery ajax
jquery为我们提供了更便利的ajax封装使用.
$.ajax({}) 可以配置方式发起ajax请求
$.get() 以get方式发起ajax请求
$.post() 以post方式发起ajax请求
$('form').serialize() 序列化表单(格式化key=val$key=val)
参数说明
url :接口地址
type :请求方式(get/post)
timeout : 要求为number类型的参数,设置请求超时时间(毫秒)
datatype: 应该是客户端传递给服务器一个值,告诉服务器如何进行处理:
data: 发送请求数据
beforesend: 要求为function类型的参数,发送请求前可以修改xmlhttprequest对象的函数,例如添加自定义http头。在beforesend中如果返回false可以取消本次ajax请求.
success: 成功响应后调用
error: 错误响应时调用
complete: 响应完成时调用(包括成功和失败)
//ajax===get $.ajax({ url:'', data:'key=value&key=value', type:'get', success:function (result) { console.log(result); } }); //ajax===post $.ajax({ url:'', data:'key=value&key=value', type:'post', success:function (result) { console.log(result); } }); //$.get $.get({ url:'', data:'key=value&key=value', success:function (result) { console.log(result); } }); //$.post $.post({ url:'', data:'key=value&key=value', success:function (result) { console.log(result); } }); //在使用jquery中ajax发送请求的时候,只需要在 datatype中写上jsonp即可实现ajax的跨域请求 datatype:'jsonp'
跨域
通过xhr实现ajax通信的一个主要限制(相同域,相同端口,相同协议),来源于跨服安全策略,默认情况下,xhr只能请求同一域的资源,这是为了防止某些恶意的行为.
cors跨域
cors(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.cors允许一个域上的网络应用向另一个域提交跨域 ajax 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。
cors支持所有类型的http请求.
服务器端对于cors的支持,主要就是通过设置access-control-allow-origin来进行的。
jsonp
jsonp由回调函数和数据组成.jsonp只支持get请求.jsonp的优势在于支持老式浏览器,以及可以向不支持cors的网站请求数据.
jsonp通过动态<script>元素来使用,src属性知道一个跨域url,jsonp是有效的javascript代码,浏览器可以跨域请求js文件.
优点:简单易用,可以直接访问响应文本,支持在浏览器和服务器之间双向通信.
缺点:1.jsonp是从其他域加载代码执行,存在不安全风险.2.不好确定jsonp请求是否成败.
通过修改document.domain来跨子域
使用window.name来进行跨域
html5中新引进 window.postmessage方法来跨域传送数据
flash
iframe
服务器设置代理页面
图像ping
通过使用标签,利用网页可以从任何网页加载图像原理.
图像ping常用于跟踪用户点击页面或动态广告曝光次数.
2个缺点:1.只支持get请求.2.无法访问服务器的响应文本.只能用于浏览器与服务器间的单项通信.
var img = new image(); img.onload = img.onerror = function (){ alert("done!"); }; img.src = "";
comet
一种更高级的ajax技术.ajax是页面向服务器请求数据的技术.comet是服务器向页面推送数据的技术.
sse (server-sent events) 服务器发送事件
web sockets
web sockets的目标是在一个单独的持久链接上提供全双工,双向通信.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关推荐:
实例分析jquery ajax异步提交表单数据的方法
前端ajax与后端交互详解
ajax实现动态加载数据的实力分享
以上就是ajax和跨域问题深入解析_ajax相关的详细内容。
贺州分类信息网,免费分类信息发布

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录