zoukankan      html  css  js  c++  java
  • jquery中ajax跨域的写法

    由于JS同源策略的影响,因此js只能访问同域名下的文档。因此要实现跨域,一般有以下几个方法:

    一、处理跨域的方式:

    1.代理

    2.XHR2

    HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已经实现了跨域访问。但ie10以下不支持

    只需要在服务端填上响应头:

         header("Access-Control-Allow-Origin:*");
           /*星号表示所有的域都可以接受,*/
        header("Access-Control-Allow-Methods:GET,POST");

    3.jsonP

    原理:

     ajax本身是不可以跨域的,
    通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

    其实设置了dataType: 'jsonp'后,$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。 

     ajax的跨域写法:

    (其余写法和不跨域的一样):


    比如 

        /*当前网址是localhost:3000*/
        js代码
        
        $.ajax({
                type:"get",
                url:"http://localhost:3000/showAll",/*url写异域的请求地址*/
                dataType:"jsonp",/*加上datatype*/
                jsonpCallback:"cb",/*设置一个回调函数,名字随便取,和下面的函数里的名字相同就行*/
                success:function(){
                    。。。
                }
            });
    
        /*而在异域服务器上,*/
        app.js
        app.get('/showAll',students.showAll);/*这和不跨域的写法相同*/
        
            
        /*在异域服务器的showAll函数里,*/
    
        var db = require("./database");
    
        exports.showAll = function(req,res){
    
        /**设置响应头允许ajax跨域访问**/
        res.setHeader("Access-Control-Allow-Origin","*");
           /*星号表示所有的异域请求都可以接受,*/
        res.setHeader("Access-Control-Allow-Methods","GET,POST");
    
        var con = db.getCon();
        con.query("select * from t_students",function(error,rows){
            if(error){
                console.log("数据库出错:"+error);
            }else{
                /*注意这里,返回的就是jsonP的回调函数名+数据了*/
                res.send("cb("+JSON.stringify(r)+")");
            }
        });
        }
  • 相关阅读:
    bzoj-2748 2748: [HAOI2012]音量调节(dp)
    bzoj-2338 2338: [HNOI2011]数矩形(计算几何)
    bzoj-3444 3444: 最后的晚餐(组合数学)
    codeforces 709E E. Centroids(树形dp)
    codeforces 709D D. Recover the String(构造)
    codeforces 709C C. Letters Cyclic Shift(贪心)
    codeforces 709B B. Checkpoints(水题)
    codeforces 709A A. Juicer(水题)
    Repeat Number
    hdu 1003 Max Sum (动态规划)
  • 原文地址:https://www.cnblogs.com/hamsterPP/p/4845194.html
Copyright © 2011-2022 走看看