AJAX请求数据及实现跨域的三种方法详解
目录
- 传统方法的缺点:
- 什么是ajax？
- XMLHttpRequest 对象
- 五步使用法：
- 同步和异步的区别：
- 如何将原生ajax进行封装
- JS几种跨域方法和原理
- 附：ajax跨域post请求的java代理实现
- 总结
传统方法的缺点:
传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
什么是ajax？
ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest 对象
XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest
| abort() | 停止当前请求 |
|---|---|
| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
| abort() | 停止当前请求 |
| getResponseHeader(“header”) | 返回指定首部的串值 |
| open(“method”,“URL”,[asyncFlag],[“userName”],[“password”]) | 建立对服务器的调用。method参数可以是GET(获取数据) 、POST（新建 增加数据）或PUT（更新 修改数据 删除数据）。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步， 默认为true异步 同步是false 同步用户名，密码 |
| send(content) | 向服务器发送请求（500 服务器报错 404 页面丢失 200 success） |
| setRequestHeader(“header”, “value”) | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 ) |
五步使用法：
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互;send(content)这个方法里面的参数可写可不写 写想服务器传输数据 不写是请求数据
4.注册事件
5.更新界面
同步和异步的区别：
同步是：等待请求完成之后 再去执行 异步是：请求和后续代码同时执行
如何将原生ajax进行封装
封装成一个函数，请求接口时候需要 路径 方式 数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/* get 方式传值 是在url 路径之后？a=1&b=2&n=3
* post 不在路径上写 send() 上发送数据
* */
function method(res, url, data, callback) {
var http = new XMLHttpRequest();
if (res == "get") {
if (data) {
url += "?";
url += data;
}
http.open(res, url);
http.send();
}
else {
http.open(res, url);
if (data) {
http.send(data);
}
else {
http.send();
}
}
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
callback(JSON.parse(http.response));
}
}
}
method("post", "./list/data.txt", null, function (data) {
console.log(data);
});
</script>
</body>
</html>
JS几种跨域方法和原理
解决ajax跨域
一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:
js跨域是指通过js在不同的域之间进行数据传输或通信，跨域 ： 协议 端口 主机名称不同会产生跨域
第一种方法：jsonp跨域（只支持get请求）
比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样：
实现原理：由于使用script标签调用远程js文件没有不受跨域的影响，所以可以通过创建一个script标签，通过src属性来访问远程文件。
其实这并不属于AJAX，但是可以实现类似AJAX的功能。
第二种方法：cross 跨域 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.readyState == 4 && http.status == 200) {
console.log(http.response);
}
}
第三种方法：代理
这种方式是通过后台(ASP、PHP、JAVA、ASP.NET)获取其他域名下的内容，然后再把获得内容返回到前端，这样因为在同一个域名下，所以就不会出现跨域的问题。
实现代码：创建一个AJAX请求（页面地址为：http://localhost/ajax/proxy.html）
var request = null;
if(window.XMLHttpRequest)
{ request = new XMLHttpRequest; }
else
{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function{ console.log(this.readyState); if(this.readyState===4 && this.status===200)
{
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象 document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中 } } request.open("POST","proxy.php",true); request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send("name=吕铭印&sex=男");
创建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的table来显示数据，同时要求请求的方法是post请求。
在开发过程中用的是jquery的异步请求。问题出现了，网上搜了半天没有发现实现jquery跨域进行post请求的解决方案(貌似不支持)，所以自己用java代码来发起post跨域请求
关于实现思路的几点说明:
1) 项目中用的是spring，所以这个请求是在spring某个controller的方法中实现的，为了方便说明问题该方法假设为（ajaxProxy）
2) 在jsp页面中通过jquery的ajax方法，发起一个请求，该请求的url映射到1)中所说的那个ajaxProxy方法，并把查询条件(param)一起传递到ajaxProxy方法.部分代码如下
$.ajax({
type : "GET",
//映射到controller对应方法的url
url : "<c:url value='/user/put/queryItems'/>",
//查询条件数据
data : param,
dataType : 'json',
success : function(data) {//动态生成table,代码略}
3) 在ajaxProxy方法中，用HttpURLConnection链接outter_url,并设置connection的请求方法为Post,并发送查询条件(param)，该部分的代码实现如下：
URL connect = new URL(outer_url); HttpURLConnection connection =(HttpURLConnection)connect.openConnection(); Connection.setRequestMethod(“Post”); //发送查询条件 OutputStreamWriter out = new OutputStreamWriter(connection.getOutputStream()); out.wirte(param); out.flush();
4) 接收数据并返回数据，jsp页面中ajax的success方法处理接收到的数据data，并把data返回就可以了，接收数据的代码如下
StringBuffer data = new StringBuffer();
BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream(), "gb2312"));
String line;
while ((line = reader.readLine()) != null) {
data.append(line);
}
return data;
综上所述，实现跨域post请求的java实现代码如下
@RequestMapping("queryItems")
public @ResponseBody
String ajaxProxy(String name, String startTime, String endTime,
String tag, Model m, HttpServletRequest req) throws UnsupportedEncodingException {
//拼接查询条件，组成json格式的数据发送
JSONObject node = new JSONObject();
try {
JSONObject param = new JSONObject();
param.put("type", "");
param.put("typevalue", "");
//param.put("key", name);
param.put("key", new String(name.toString().getBytes("utf-8"), "gbk"));
param.put("start_time", startTime);
param.put("end_time", endTime);
param.put("tags", tag);
node.put("param", param);
JSONObject user = new JSONObject();
user.put("userid", "123");
node.put("user", user);
JSONObject device = new JSONObject();
device.put("dnum", "123");
node.put("device", device);
JSONObject developer = new JSONObject();
developer.put("apikey", "******");
developer.put("secretkey", "*****");
node.put("developer", developer);
node.put("action", action);
} catch (JSONException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
// 使用POST方式向目的服务器发送请求
URL connect;
StringBuffer data = new StringBuffer();
try {
connect = new URL("outter_url");
HttpURLConnection connection = (HttpURLConnection)connect.openConnection();
connection.setRequestMethod("POST");
connection.setDoOutput(true);
OutputStreamWriter paramout = new OutputStreamWriter(
connection.getOutputStream(),"UTF-8");
paramout.write(json);
paramout.flush();
BufferedReader reader = new BufferedReader(new InputStreamReader(
connection.getInputStream(), "gb2312"));
String line;
while ((line = reader.readLine()) != null) {
data.append(line);
}
paramout.close();
reader.close();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return data.toString();
}
总结
到此这篇关于AJAX请求数据及实现跨域的三种方法的文章就介绍到这了,更多相关AJAX请求数据及跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
ajax前台后台跨域请求处理方式
最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动.汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成.下面就分享一下个人解决跨域请求的方案,当然是在后台程序猿大哥的帮助下,我才弄明白了其中的渊源,赶紧记录下来慢慢积累,也希望对大家能有所帮助,还请积极提出意见或建议. 跨域请求需要借助后台代码接收callback回调函数,对json数据进行进一步处理:前台再用ajax请求向服务器发送callback参数,并指定数据格式为jsonp.
-
Ajax异步(请求)提交类 支持跨域
复制代码 代码如下: /**//* 异步请求类 作者:吾非无心 创建时间:2009.2 --------------------------------------------------------------------------------------------------------------------------------- 修改记录: 2009.4.27--添加 URL 检测功能,如果是"http://xxxx.xxx.xx.xx/.."这样的格式,使用系统提供的
-
AJAX跨域请求json数据的实现方法
我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法: Js代码 复制代码 代码如下: jQuery.getJSON("http://search.twitter.
-
解决ajax跨域请求数据cookie丢失问题
前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: { withCredentials: true }, crossDomain: true, $.ajax({ type: postType, url: url, data: postData || '', xhrFields: { withCredentials: tru
-
Ajax请求跨域问题解决方案分析
本文实例讲述了Ajax请求跨域问题解决方案.分享给大家供大家参考,具体如下: 几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1.协议,2.地址,3.端口,只有三者都相同才被认为是同一来源. 一.解决方案: 1,在服务器端的响应头中添加一个http参数: res.setHeader("Access-Control-Allow-Origin&quo
-
AJAX跨域请求数据的四种方法(实例讲解)
由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦 在这里我就不写了 通过该对象进行获取 获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请
-
AJAX请求数据及实现跨域的三种方法详解
目录 传统方法的缺点: 什么是ajax? XMLHttpRequest 对象 五步使用法: 同步和异步的区别: 如何将原生ajax进行封装 JS几种跨域方法和原理 附:ajax跨域post请求的java代理实现 总结 传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互.只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户
-
AJAX实现跨域的三种方法（代理,JSONP,XHR2）
域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系.当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享. 由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只
-
jQuery使用JSONP实现跨域获取数据的三种方法详解
本文实例讲述了jQuery使用JSONP实现跨域获取数据的三种方法.分享给大家供大家参考,具体如下: 第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } }); 第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可 $.getJSON('http:/
-
json跨域调用python的方法详解
本文实例讲述了json跨域调用python的方法.分享给大家供大家参考,具体如下: 客户端: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
JSONP跨域原理以及实现方法详解
目录 前言 一.同源策略和跨域 1.1 同源策略 1.1.1 什么是同源 1.1.2 什么是同源策略 1.2 跨域 1.2.1 什么是跨域 1.2.2 浏览器对跨域请求的拦截 1.2.3 如何实现跨域数据请求 二.JSONP 概述 2.1 JSONP原理 2.2 优点 2.3 缺点 三.JSONP 应用流程 四.JSONP 实现 3.1 简单的实例: 3.2 可靠的 JSONP 实例: 五.JSONP安全性问题 5.1 CSRF攻击 5.2 XSS漏洞 5.3 服务器被黑,返回一串恶意执行的代码
-
python数据归一化及三种方法详解
数据标准化(归一化)处理是数据挖掘的一项基础工作,不同评价指标往往具有不同的量纲和量纲单位,这样的情况会影响到数据分析的结果,为了消除指标之间的量纲影响,需要进行数据标准化处理,以解决数据指标之间的可比性.原始数据经过数据标准化处理后,各指标处于同一数量级,适合进行综合对比评价.以下是三种常用的归一化方法: min-max标准化(Min-Max Normalization) 也称为离差标准化,是对原始数据的线性变换,使结果值映射到[0 , 1]之间.转换函数如下: 其中max为样本数据的最大值,
-
jQuery 跨域访问解决原理案例详解
浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览
-
完美解决浏览器跨域的几种方法(汇总)
1.什么是跨域问题 在页面中使用js访问其他网站的数据时,就会出现跨域问题,比如在网站中使用ajax请求其他网站的天气.快递或者其他数据接口时,以及hybrid app中请求数据,浏览器会提 示一下错误: XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is t
-
解决SpringBoot跨域的三种方式
一.什么是跨域 1.1.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现.同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互.所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port) 简单说A应用只能访问
-
详解springboot解决CORS跨域的三种方式
目录 一.实现WebMvcConfigurer接口 二.实现filter过滤器方式 三.注解@CrossOrigin 四.实战 五.cookie的跨域 一.实现WebMvcConfigurer接口 @Configuration public class WebConfig implements WebMvcConfigurer { /** * 添加跨域支持 */ @Override public void addCorsMappings(CorsRegistry registry) { // 允