当前位置:首页 > 谈天说地 > 正文内容

ajax请求步骤详细代码(前端ajax请求的五个步骤)

34资源网2021年12月05日 18:06999

由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问。

比如说你的网站域名是aaa.com,想要通过AJAX请求bbb.com域名中的内容,浏览器就会认为是不安全的,所以拒绝访问。

会出现跨域问题的几种情况:

后台在百度上寻找解决方案解决了这个问题,一共总结出三种方案:代理、JSONP、XHR2(XMLHttpRequestLevel2)。

第一种方法代理:这种方式是通过后台(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=男");
1234567891011121314151617复制代码类型:[javascript]

创建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;1234复制代码类型:[javascript]

使用php代码获取localhost:63342下的proxy.js文件。

proxy.js代码

proxy.html运行结果

至此,使用代理实现了访问不同域之间的文件。

首先在proxy.html使用AJAX访问后台的proxy.php文件,然后proxy.php接收到请求之后去访问localhost:63342中的proxy.js文件,获取到proxy.js的内容后,将内容返回到前端页面,这就实现了跨域的功能。

如果要访问多个跨域文件,可以以参数的形式告诉后台proxy.php文件要访问的文件的地址。

第二种方法JSONP(只支持GET请求):后来人们发现,在调用Js文件的时候不受跨域的影响,这样就衍生了第二种方案。

就是在远程服务器端把数据装入js文件中,供客户端调用和进一步处理。

jsonp.html

    var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
    var scriptTag = document.createElement("script");   //创建一个script标签
    scriptTag.setAttribute("src",url);  //设置script的src属性
    document.body.appendChild(scriptTag);   //将script标签添加到body中
    //回调函数
    var jsonp_callback = function(resultObj){
        document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
    }
jsonp.php

$name = $_GET["name"];
    $sex = $_GET["sex"];
    $callbackname = $_GET["callbackname"];    //回调函数名称
    echo "$callbackname({name:'$name',sex:'$sex'})";12345678910111213141516复制代码类型:[javascript]

jsonp.html运行结果:

实现原理:由于使用script标签调用远程js文件没有不受跨域的影响,所以可以通过创建一个script标签,通过src属性来访问远程文件。

其实这并不属于AJAX,但是可以实现类似AJAX的功能。

第三种方法XMLHttpRequestLevel2:HTML5提供的XMLHttpRequestLevel2已经实现了跨域访问以及其他的一些新功能

这需要在远程服务器端添加如下代码

这样在客户端使用常规的AJAX代码即可。

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址,可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET'); 

看完文章,还可以扫描下面的二维码下载快手极速版领4元红包

快手极速版二维码

快手极速版新人见面礼

除了扫码领红包之外,大家还可以在快手极速版做签到,看视频,做任务,参与抽奖,邀请好友赚钱)。

邀请两个好友奖最高196元,如下图所示:

快手极速版邀请好友奖励

扫描二维码推送至手机访问。

版权声明:本文由34楼发布,如需转载请注明出处。

本文链接:https://www.34l.com/post/2695.html

分享给朋友:

相关文章

100句关于老祖宗留下来的话,都是经典名言

100句关于老祖宗留下来的话,都是经典名言

在浩瀚的历史文化中,我们的祖先除了给我们留下了很多的精神财富和文化遗产,像下面这100句老祖宗留下来的经典名言,我们一定要好好了解下。1、水不激不跃,人不激不奋。2、行行出状元,处处有能人。3、寒蝉抱枯木,泣尽不回头。4、立下凌云志,敢去摘...

上海11月9日又新增一名新冠病毒感染者

上海11月9日又新增一名新冠病毒感染者

上海也不太平啊,据说昨天又新增了一例,这位新冠肺炎感染者是一名51岁的男性,具体请往下看吧。原标题:上海新增1例本地新冠肺炎确诊病例 密切接触者首次核酸检测均为阴性记者11月9日从上海市新冠肺炎疫情防控新闻发布会上获悉,上海市新增1例本地新...

用白面书生造句,看看这七句有哪句适合你?

用白面书生造句,看看这七句有哪句适合你?

1、他是个手无缚鸡之力的白面书生。2、别看他文绉绉的像个白面书生,一上足球场勇猛非凡,踢起球来可狠了。3、那个白面书生经不起严刑拷打,向敌人投降了。4、我一个白面书生,又手无寸铁,怎敢和那几个黑脸大汉较真呢!5、新时代的大学生不是白面书生,...

想要赚钱创业首先要改变自己的思维

想要赚钱创业首先要改变自己的思维

大市场,前景行业,无非是能源、通信、金融行业。小市场,比较有前景的,是大众所需,消费忠识度比较高的行业,比如饮食,零售、生产。无论是工作,还是创业!你需要选择自己兴趣,找准自己的优势,发现你的特长.1:考虑你的兴趣,做你最喜欢做的,只有让工...

抖音长视频怎么开通?抖音开通长视频的权限分享

抖音长视频怎么开通?抖音开通长视频的权限分享

经常玩抖音的朋友来说开通抖音1分钟长视频已经不是一件难事了。大家都知道抖音默认视频长度为15秒。只有达到一定要求才可以获得长视频权限。但是现在我们发现能发抖音长视频的朋友越来越多了。他们是怎么做到的呢?抖音怎么发长1分钟视频呢?抖音长视频是...

豆瓣直播,谁会买单?

豆瓣直播,谁会买单?

图源:摄图网 编者按:本文来自微信公众号连线Insight(ID:lxinsight),作者:张霏,编辑:李信,创业邦经授权转载 被外界视为低调的豆瓣从不缺关注。 昨晚,#豆瓣已暂停小组回复功能#和#国家网信办依法约谈处罚豆瓣网#双双...