ajax跨域的这个问题其实很普遍。本文主要介绍AJAX请求数据的相关信息以及实现跨域的三种方法。通过示例代码详细介绍，有需要的朋友可以参考一下。
目录
传统方法的缺点：什么是ajax？XMLHttpRequest对象的五步用法：同步与异步的区别：如何封装原生ajax JS几种跨域方法及原理附：ajax跨域post请求的java代理实现总结
传统方法的缺点：
传统的web交互是用户触发一个http请求服务器，然后服务器响应用户，收到后返回一个新页面。每当服务器处理客户端提交的请求时，客户端只能无所事事地等待，即使只是一个很小的交互，只需要从服务器获取一个简单的数据，就会返回一个完整的HTML页面，而用户每次都要浪费时间和带宽重新阅读整个页面。这就浪费了大量的带宽，因为每个应用程序交互都需要向服务器发送一个请求，而应用程序的响应时间取决于服务器的响应时间。这导致用户界面的响应比本地应用程序慢得多。
什么是ajax？
ajax的出现正好解决了传统方法的缺陷。AJAX是一种创建快速动态网页的技术。AJAX可以通过在后台与服务器交换一点数据，使网页异步更新。这意味着您可以更新网页的某些部分，而无需重新加载整个网页。
XMLHttpRequest 对象
XMLHttpRequest对象是ajax的基础，XMLHttpRequest用于在后台与服务器交换数据。这意味着您可以更新网页的某些部分，而无需重新加载整个网页。目前所有浏览器都支持XMLHttpRequest。
中止()
停止当前请求
getAllResponseHeaders()
以键/值对的形式返回HTTP请求的所有响应头。
中止()
停止当前请求
getResponseHeader("header ")
返回指定标题的字符串值。
open("方法"，" URL "，[asyncFlag]，["用户名"]，["密码"])
建立对服务器的呼叫。参数方法可以是GET(获取数据)、POST(创建新数据)或PUT(更新修改数据删除数据)。url参数可以是相对URL或绝对URL。这个方法还包括三个可选参数，是否异步，默认为true。异步同步为假。同步用户名和密码。
发送(内容)
向服务器发送请求(500服务器错误404页面丢失200成功)
setRequestHeader("header "，" value ")
将指定的标头设置为提供的值。在设置任何头之前，必须调用Open()。设置标题并随请求一起发送(post方法必须)
五步使用法：
1.创建XMLHTTPRequest对象
2.使用open方法设置与服务器的交互信息。
3.设置发送的数据并开始与服务器交互；Send(content)这个方法中的参数可以写也可以不写。如果你想让服务器传输数据，你可以在不写的情况下请求数据。
4.注册事件
5.更新界面
同步和异步的区别：
同步是：等待请求完成后再执行异步是：请求和后续代码同时执行。
如何将原生ajax进行封装
封装到一个函数中，请求接口时需要路径模式数据。
！文档类型html
超文本标记语言
头部语言
meta charset='UTF-8 '
标题/标题
/头
身体
脚本
/* GET方法传递的值是否在url路径之后？a=1b=2n=3
* post不在发送数据的路径上写send()。
* */
函数方法(res、url、数据、回调){
var http=new XMLHttpRequest()；
if (res=='get') {
if(数据){
url='？'；
url=数据；
}
http.open(res，URL)；
http . send()；
}
否则{
http.open(res，URL)；
if(数据){
http.send(数据)；
}
否则{
http . send()；
}
}
http . onreadystatechange=function(){
if(http . ready state==4 http . status==200){
回调(JSON . parse(http . response))；
}
}
}
方法(' post '，'。/list/data.txt '，null，function (data) {
console.log(数据)；
});
/脚本
/body
/html
JS几种跨域方法和原理
解决ajax跨域
一般ajax跨域解决方案是通过JSONP或CORS来解决，比如下面这样：
Js跨域是指不同域之间通过js进行数据传输或通信。跨域：不同的协议端口主机名会导致跨域。
第一种方法：jsonp跨域(只支持get请求)
例如，有一个a.html页面，其代码需要使用ajax来获取不同域中的json数据。假设json数据的地址是http://example.com/data.php,a.html的代码可能是这样的：
实现原理：因为用脚本标签调用远程js文件并不是不受跨域影响的，所以可以通过创建一个脚本标签，使用src属性来访问远程文件。
其实这不属于AJAX，但是可以实现类似AJAX的功能。
第二种方法：跨跨域php在其中配置header(' access-control-allow-origin:* ')；仅支持HTML5。
var http=new XMLHttpRequest()；
http.open('post '，' http://127 . 0 . 0 . 1:8080/0616/insert . PHP ')；
http . send()；
http . onreadystatechange=function(){
if(http . ready state==4 http . status==200){
console . log(http . response)；
}
}
第三种方法：代理。
这样通过后台获取其他域名下的内容(ASP，PHP，JAVA，ASP。NET)，然后将获取的内容返回到前端，这样就不会因为在同一个域名下而出现跨域的问题。
实现代码：创建一个AJAX请求(页面地址：http://localhost/ajax/proxy.html)
var请求=null
如果(窗口。XMLHttpRequest)
{ request=new XMLHttpRequest}
其他
{
request=new ActiveX object(' Microsoft。XMLHttp’)；
}
request . onreadystatechange=function { console . log(this . ready state)；if(this . ready state===4 this . status===200)
{
var result obj=eval('(' this . responsetext '))；//将返回的文本数据转换为JSON对象document.getElementByid ('box ')。innerHTML=result obj . name ':' result obj . sex；//在页面中显示返回的内容}} request.open ('post '，' proxy.php '，true)；request . setrequestheader(' Content-Type '，' application/x-www-form-urlencoded ')；Request.send('姓名=吕尹铭性别=男')；
创建AJAX请求。
Proxy.php电码
header(' Content-type:text/html；charset=utf-8 ')；
$ URL=' http://localhost:63342/Ajax/proxy . js '；
$ contents=file _ get _ contents($ URL)；
echo $ contents
附：ajax跨域post请求的java代理实现
最近开发的项目有一个功能需求是这样的：根据用户提供的外部链接(outter_url)，在页面上填写查询条件(param)并向url发起查询请求，查询返回的数据动态生成html表显示数据，请求方法是post request。
开发过程中使用了jquery的异步请求。问题出现了。网上找了半天，没有找到实现jquery跨域post请求的解决方案(貌似不支持)，就用java代码发起post跨域请求。
关于实现思想的一些解释：
1)项目中使用了spring，所以这个请求是在spring中的一个控制器的方法中实现的，为了便于解释，假设为(ajaxProxy)。
2)通过jquery的ajax方法在jsp页面中发起请求。请求的url映射到1)中提到的ajaxProxy方法，查询条件(param)一起传递给ajaxProxy方法。部分代码如下
$.ajax({
键入：' GET '，
//映射到控制器对应方法的url
URL:' c:URL value='/user/put/query items '/'，
//查询条件数据
数据：参数，
数据类型：' json '，
成功：函数(数据){//动态生成表格，代码省略}
3) 在ajaxProxy方法中，用HttpURLConnection链接outter_url，并设置关系的请求方法为帖子，并发送查询条件（参数),该部分的代码实现如下：
URL connect=new URL(outer _ URL)；
HttpURLConnection连接=(HttpURLConnection)连接。打开连接()；
联系。setrequestmethod(" Post ")；
//发送查询条件
output streamwriter out=新的输出streamwriter(连接。获取输出流())；
出去。wirte(参数)；
出去。flush()；
4) 接收数据并返回数据，jsp页面中创建交互式、快速动态网页应用的网页开发技术的成功方法处理接收到的数据数据，并把数据返回就可以了，接收数据的代码如下
字符串缓冲区数据=新字符串缓冲区()；
缓冲读取器reader=新缓冲读取器(新输入流读取器(连接。getinputstream()，' GB 2312 ')；
弦线；
while ((line=reader.readLine())！=null) {
数据.追加(行);
}
返回数据；
综上所述，实现跨域邮政请求的Java 语言(一种计算机语言，尤用于创建网站)语言（一种计算机语言，尤用于创建网站)实现代码如下
@RequestMapping('queryItems ')
public @ResponseBody
字符串ajaxProxy(字符串名称，字符串开始时间，字符串结束时间，
线标记型号m，HttpServletRequest请求)抛出UnsupportedEncodingException {
//拼接查询条件，组成json格式的数据发送
JSON对象节点=new JSON对象()；
尝试{
JSON object param=new JSON object()；
param.put('type '，' ')；
param.put('typevalue '，' ')；
//param.put('key '，name)；
param.put('key '，新字符串(name.toString().getBytes('utf-8 ')，' gbk ')；
param.put('start_time '，开始时间)；
param.put('end_time '，结束时间)；
param.put('tags '，tag)；
node.put('param '，param)；
JSON对象user=new JSON对象()；
user.put('userid '，' 123 ')；
node.put('user '，用户);
JSON对象设备=新JSON对象()；
device.put('dnum '，' 123 ')；
node.put('device '，设备);
JSON对象开发者=new JSON对象()；
developer.put('apikey '，' * * * * ')；
developer.put('secretkey '，' * * * ')；
node.put('developer '，开发者);
node.put('action '，action)；
} catch (JSONException e1) {
//TODO自动生成的捕捉块
E1。printstacktrace()；
}
//使用邮政方式向目的服务器发送请求
统一资源定位器连接；
字符串缓冲区数据=新字符串缓冲区()；
尝试{
connect=new URL(' outter _ URL ')；
HttpURLConnection连接=(HttpURLConnection)连接。打开连接()；
联系。setrequestmethod(' POST ')；
联系。setdoooutput(true)；
output streamwriter paramout=新的输出streamwriter(
connection.getOutputStream()，' UTF-8 ')；
paramout。写(JSON)；
参数输出。flush()；
缓冲读取器reader=新缓冲读取器(新输入流读取器(
connection.getInputStream()，' GB 2312 ')；
弦线；
while ((line=reader.readLine())！=null) {
数据.追加(行);
}
paramout。close()；
读者。close()；
} catch(异常e) {
//TODO自动生成的捕捉块
e。printstacktrace()；
}
返回数据。tostring()；
}
总结
到此这篇关于创建交互式、快速动态网页应用的网页开发技术请求数据及实现跨域的三种方法的文章就介绍到这了，更多相关创建交互式、快速动态网页应用的网页开发技术请求数据及跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。