XmlHttpRequest使用及“跨域”问题解决

一. IE7以后对xmlHttpRequest 对象的创建在不同浏览器上是兼容的。

下面的方法是考虑兼容性的，实际项目中一般使用Jquery的ajax请求，可以不考虑兼容性问题。

function getHttpObject() {
var xhr=false;
if (windows.XMLHttpRequest)
    xhr=new XMLHttpRequest();
else if (window.ActiveXObject)
{
    xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}

二. XMLHttpRequest的属性及方法

1、方法 描述
abort() 停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”) 返回指定键的首部串值
open(“method”,”url”) 建立对服务器的调用，Method可以是GET，POST或PUT，URL可以是相对或绝对URL
send（content） 向服务器发送请求
setRequestHeader(“header”,”value”) 把指定首部设置为所提供的值。在设置任何首部之前必须调用open()

2、属性 描述
onreadystatechange 每个状态改变都会触发，通常会调用一个javascript函数
readyState 请求的状态，5个值； 0：为初始化，1：正在加载；2：已经加载，3：交互中，4：完成
responseText 服务器的响应，表示为字符串
responseXML 服务器的响应，表示为XML，可以解析为DOM对象
status 服务器的HTTP状态码(200：ok,304:not modified,404:Not Found 等)
statusText Http状态码的相应文本(ok或Not Found)

3、手写一个Ajax请求的例子：

eg1: get

$(function(){
      $("#id").onclick(tunction(){
          var request=new XMLHttpRequest();
          var url="http://www.baidu.com";
          var method="GET";
          request.open(method,url);
          request.send(null);
          request.onreadystatechange=function(){
             if (request.readyState==4&&(request.status==200 || request.status==304))
                alert (request.reponseText);
                //如果返回的是html 标签，则可以使用 　　　　　　　　　 //$(“#id2”).innerHtml=request.reponseText;
                //如果返回的xml格式,则需要将结果通过getElementByTagName(“”)[index]解析 　　　　　　　　　//alert(request.reponseXML.getElementByTagName(“”)[index])
 
　　　　　　　　　 /*var type=request.getResponseHeader("Content-Type");
                if(type.indexOf("xml") !== -1 && request.responseXML){
                    callback(request.responseXML); //Document对象响应
                }else if(type=== ‘application/json‘){
                    callback(JSON.parse(request.responseText)) //JSON响应
                }else {
                    callback(request.responseText);
                }*/
} }) })

eg2: post

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    xhr.ontimeout = function (event) {
        alert("请求超时！");
    }
    var formData = new FormData();
    formData.append(‘tel‘, ‘18217767969‘);
    formData.append(‘psw‘, ‘111111‘);
    xhr.open(‘POST‘, ‘http://www.test.com:8000/login‘);
    xhr.send(formData);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
        else {
            alert(xhr.statusText);
        }
    }
</script>

eg3:同步响应
    //同步响应
    //发起同步的HTTP GET请求以获得指定URL的内容
    //返回响应文本，或如果请求不成功或响应不是文本就报错。
    function getTextSync(url){
        var request=new XMLHttpRequest();
        request.open("GET",url,false); //把fasle作为第三个参数传递给open()，那么send()方法将阻塞直到请求完成
        request.send(null);

        if(request.status!==200) throw new Error(request.statusText);

        var type=request.getResponseHeader(‘Content-Type‘);
        if(!type.match(/^text/)) throw new Error("Expected textual respomse;got:"+type);

        return request.responseText;
    }

三、.跨域资源共享（CORS）

XMLHttpRequest可以向不同域名的服务器发出HTTP请求，叫做CORS

解决方案：

1)、服务器允许跨域：响应头需要添加一下选项

CORS头缺少“Access-Control-Allow-Origin”, 这个错误代表: 服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    // * 表示允许任何域名跨域访问
    response.setHeader("Access-Control-Allow-Origin", "*");
    // 指定特定域名可以访问
    response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");

    //数据
    List<Student> studentList = getStudentList();

    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

　　

2）、JSONP，jsonp有缺点，只能发送get请求

下面的方法是考虑兼容性的，实际项目中一般使用Jquery的ajax请求，可以不考虑兼容性问题。

eg1:如何使用<script src="">来完成一个跨域请求前台：

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>跨域测试</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
//回调函数
function showData (result) {
var data = JSON.stringify(result); //json对象转成字符串
$("#text").val(data);
}

$(document).ready(function () {

$("#btn").click(function () {
//向头部输入一个脚本，该脚本发起一个跨域请求
$("head").append("<script src=‘http://localhost:9090/student?callback=showData‘><\/script>");
});

});
</script>
</head>
<body>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

后台：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");

//数据
List<Student> studentList = getStudentList();

JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();

//前端传过来的回调函数名称
String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
result = callback + "(" + result + ")";

response.getWriter().write(result);
}

eg2:jquery的jsonp方式跨域请求

---后台代码还是上面的

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>跨域测试</title>
<script src="js/jquery-1.7.2.js"></script>
<script>

$(document).ready(function () {

$("#btn").click(function () {

$.ajax({
url: "http://localhost:9090/student",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
success: function (data) {
var result = JSON.stringify(data); //json对象转成字符串
$("#text").val(result);
}
});

});

});
</script>
</head>
<body>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

3）、搭建网关系统

附其他：

这里再插入一下window.onload 和$(function(){})（$(document).ready(function(){})）的区别：

1. window.onload 必须等到页面内包括图片的所有元素加载完毕才能执行

$(function(){}) 是DOM结构绘制完毕后就执行，不必等到加载完毕。

2. 编写个数不同

window.onload 不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(function(){}) 可以同时编写多个，并且都会得到执行

3. 简化写法

window.onload 没有简写方法，但可以使用$(window).load(function(){})代替

$(function(){})实际是$(document).ready(function(){})的缩写方法

$(window).load(function(){}),IE只有在不是frame的情况下,一般情况下都会在$(function(){})之后执行.

原文地址：https://www.cnblogs.com/651434092qq/p/11109199.html

时间： 2024-08-01 23:40:40

XmlHttpRequest使用及“跨域”问题解决的相关文章

IE8 jquery跨域问题解决

1.IE8 jquery跨域问题解决: 加下面code 源地址: https://github.com/dkastner/jquery.iecors/blob/master/jquery.iecors.js (function( jQuery ) { // Create the request object // (This is still attached to ajaxSettings for backward compatibility) jQuery.ajaxSettings.xdr

FastAdmin 关于跨域问题解决

FastAdmin 关于跨域问题解决 之前很久之前收集到社区的问题. https://forum.fastadmin.net/thread/277 今天又有人问到,无法打开,估计是网络问题. 以下为完整配置 1 # # CORS header support # # One way to use this is by placing it into a file called "cors_support" # under your Nginx configuration directo

odoo Controller接口开发 POST请求的跨域问题解决方法

odoo Controller接口开发 POST请求的跨域问题解决方法 1.odoo Controller接口开发,前端在请求的时候会发生跨域问题,报错信息如下:Function declared as capable of handling request of type 'json' but called with a request of type 'http' 2.解决方法如下: odoo官网给的参数解释: cors – The Access-Control-Allow-Origin c

web项目中的跨域问题解决方法

一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多的浏览器, 缺点是仅支持Get的方式对服务端请求. 另一种主流的跨域方案是CORS,他仅需要服务端在返回数据的时候在相应头中加入标识信息.这种方式非常简便.唯一的缺点是需要浏览器的支持,一些较老的浏览器可能不支持CORS特性. 跨域支持是创建WebService时应该考虑的一个功能点,文中是使用Se

跨域问题解决方式(HttpClient安全跨域 &amp;amp; jsonp跨域)

1 错误场景 今天要把项目部署到外网的时候,出现了这种问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 执行 都没有问题的, 一旦把我须要调用接口的项目B放到其它的server上, 就会报错, 无法通过Ajax调用springMVC的接口, 这是什么原因呢? 当我使用json ajax post请求传递数据的时候在web端出错:XMLHttpRequest cannot loadhttp://ip:8082/security/auth/outside.do. Origin ht

XMLHTTPRequest对象不能跨域获取数据？！

写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一个json文件过来),运行就跑不起来了. 这就涉及到跨域获取数据的问题了. 我运行时的环境是这样的: 本地服务器运行当前代码.转向http://gumball.wickedlysmart.com获取一个json文件过来. 结果:报错. XMLHttpRequest cannot load   No

AJAX（XMLHttpRequest）进行跨域请求方法详解（三）

注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 3,带验证信息的请求 身份验证是Web开发中经常遇到的问题,在跨域请求中,默认情况下是不发送验证信息的.要想发送验证信息,需要进行withCredentials 属性,下面就是一个简单请求的例子: [xhtml] view plaincopyprint? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

AJAX（XMLHttpRequest）进行跨域请求方法详解（二）

注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 2,预检请求 预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头,其目的就是为了判断实际发送的请求是否是安全的.下面的2种情况需要进行预检:a,不是上面的简单请求,比如使用Content-Type 为 application/xml 或 text/xml 的 POST 请求b,在请求中设置自定义头,比如 X-JSON.X-MENGXI

AJAX（XMLHttpRequest）进行跨域请求方法详解（一）

注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源.这种情况很常见,比如说通过 style 标签加载外部样式表文件.通过 img 标签加载外部图片.通过 script 标签加载外部脚本文件.通过 Webfont 加载字体文件等等.默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy). 那么,什么是同源