精华内容
下载资源
问答
  • 原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求。 了解一下:“同源策略”,你就知道了;  同源策略限制从一个源加载文档或脚本如何与...

    原生JS如何实现Ajax的跨域请求?

    在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求。

    了解一下:“同源策略”,你就知道了;

      同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

      它的定义是:

        一段脚本向后台请求数据,只能读取属于同一协议名、同一主机名、同一端口号下的数据;

        所以,请求不同协议名、不同端口号、不同主机名下面的文件时,

            将会违背同源策略,无法请求成功,需要进行跨越处理!!

    解决跨域请求的方法:

    方法一:

      通过后台的PHP进行设置

      前台无需任何设置,在后台被请求的PHP文件中,写入一条header。

        header("Access-Control-Allow-Origin:*");    --- 表示允许哪些域名请求这个PHP文件,*表示所有域名都允许

    JS代码:  

    $.post("http://127.0.0.1/json.php",function(data){
       console.log(data); 
    });

    注释:

      其中,url为PHP文件的路径;

    PHP代码:

    <?php
            header("Content-Tyepe:text/html;charset=utf-8");
            header("Access-Control-Allow-Origin:*");
            $str = <<<str
            [
             {
                "name":    "影子",
                "age":    17,
                "hobby":    [
                        "吃",
                        "喝",
                        "玩",
                        "乐"
                ],
                "score":{
                        "math":78,
                        "chinese":89
                }
            },                  
    ]
    str;
    echo $str;                                   

    结果:

      

    方法二:

      实现步骤: 

        1、原有src属性的标签子带跨域功能;所以可以使用script标签的src属性请求后台数据

            <script src="http://127.0.0.1/json.php">< /script>

          2、用于src在加载数据成功后,会直接将加载的内容放到script标签中;

             所以,后台直接返回JSON字符串将不能在script标签中解析。

             因此,后台应该返回给前台一个回调函数名,并将JSON字符串作为参数传入。

              后台PHP文件中返回: echo "callback({$json})";

           3、前台接收到返回的回调函数,将直接在script标签中调用。因此,需要声明这样一个回调函数,作为请求成功的回调

    function callback(data){
     
        alert("请求成功!!");
     
        console.log(data);
     
    }

    JS代码:

    <script type="text/javascript">
            function callback(data){
                   console.log(data); 
            }
    </script>
    <script src="http://127.0.0.1/json.php"></script>

    PHP文件:

    <?php
        header("Content-Tyepe:text/html;charset=utf-8");
        $str = <<<str
        [
        {
            "name":"yingzi",
            "age":17,
            "hobby":[
                "吃",
                "喝",
                "玩",
                "乐"
            ],
        }
    ]
    str;
    echo "callback({$str})";

    结果:

    方法三:

       1、在ajax请求时,设置dataType为"jsonp";

           2、后台返回时,依然需要返回回调函数名,但是,ajax在发送请求时,会默认使用get请求将回调函数名发给后台,

           后台$_GET['callback'] 取出函数名:

             ---   echo "{$_GET['callback']}({$str})";

           3、后台返回以后,前台就可以使用ajax的success函数作为成功的回调

             ---    success : function(data){}

    JS代码:

    <script type="text/javascript">
        $.ajax({
            type:"post",
            url:"http://127.0.0.1/json.php",
            dataType:"jsonp",
            success:function(data){
                console.log(data);
            }
        });
    </script>

    PHP文件:

    <?php
        header("Content-Tyepe:text/html;charset=utf-8");
        $str = <<<str
        [
        {
            "name":"yingzi",
            "age":17,
            "hobby":[
                "吃",
                "喝",
                "玩",
                "乐"
            ],
        }
    ]
    str;
    echo "{$_GET['callback']}({$str})";

    结果:

    当然,后台也可以随便返回一个函数名,前台只要请求成功,就会自动调用这个函数。类似第二条的②、③步,而不需要本方法的第③步

     PHP返回: echo "callback({$str})";

      JS代码:  function callback(data){

            console.log(data);

          }

    JS代码:

    <script type="text/javascript">
        $.ajax({
            type:"post",
            url:"http://127.0.0.1/json.php",
            dataType:"jsonp",
        });
        function(data){
            console.log(data);
        }
    </script>

    PHP文件:

    <?php
        header("Content-Tyepe:text/html;charset=utf-8");
        $str = <<<str
        [
        {
            "name":"yingzi",
            "age":17,
            "hobby":[
                "吃",
                "喝",
                "玩",
                "乐"
            ],
        }
    ]
    str;
    echo "callback({$str})";

    结果:

    Web前端工程师,关于数据交互这一块,会用到的地方很多;这是大神“影子”的文章,我是无耻的搬运过来的,如有侵权,请联系本人删除;下面附上“影子”的博客原文链接:https://www.cnblogs.com/2502778498spw/p/7784390.html

    转载于:https://www.cnblogs.com/Webzhoushifa/p/9426000.html

    展开全文
  • 今天分享的是Ajax,使用Ajax的步骤:1、创建对象2、创建请求3、发送请求参数4、接收响应接下来准备工作,可以搜索高德地图开放平台-Web服务API-天气查询。天气查询一个简单HTTP接口,根据用户输入adcode,...

    63a19b07e91d9fc06a4284754dda054e.png

    今天分享的是Ajax,使用Ajax的步骤
    1、创建对象
    2、创建请求
    3、发送请求参数
    4、接收响应
    接下来是准备工作,可以搜索高德地图开放平台-Web服务API-天气查询。
    天气查询是一个简单的HTTP接口,根据用户输入的adcode,查询目标区域当前/未来的天气情况。
    使用API前您需先申请Key,若无高德地图API账号需要先申请账号。

    90693920939d8e6d8e19ded6f88d239a.png


    里面有请求方式和参数,key是要自己申请的

    9042afb2b7cbc626bf9c3522479ca86e.png


    好的,到这里就开始上代码了咯

    HTML:

    ebd2c6a49ce02ecbac80cb468066dcc0.png

    65f6d99c40240873fb63fd11b0c21de0.png

    效果图:

    803b7e62cff127620ea5ad339f2eace2.png

    ————————————————

    版权声明:本文为CSDN博主「大阳plus」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

    原文链接:

    原生js、Ajax编写一个天气预报,搜索查询_weixin_43400431的博客-CSDN博客_.blog.csdn.net
    43e6b5a0afe1fff267302a1982eaa467.png
    展开全文
  • 变量和属性 alert(a) //报错 a is not defined alert(window.a) //...ajax 请求 function ajax(url, fnSucc, fnFaild) { //1、创建Ajax对象 if (window.XMLHttpRequest) { var oAjax = new XMLHttpRequest()

    变量和属性

    alert(a) //报错 a is not defined
    alert(window.a) //undefined

    全局变量是 window 的一个属性

    未定义的变量,使用会报错

    未定义的属性,使用时值是 undefined

    ajax 请求

    function ajax(url, fnSucc, fnFaild) {
    	//1、创建Ajax对象
    	if (window.XMLHttpRequest) {
    		var oAjax = new XMLHttpRequest()
    	} else {
    		var oAjax = new ActiveXObject("Microsoft.XMLHTTP") //为了兼容 ie6
    	}
    	//2、连接服务器
    	oAjax.open('GET', url, true)
    	//3、发送请求
    	oAjax.send()
    	//4、接收返回值
    	oAjax.onreadystatechange = function () {
    		if (oAjax.readyState == 4) {
    			if (oAjax.status == 200) {
    				fnSucc(oAjax.responseText)
    			} else {
    				if(fnFaild){
    					fnFaild(oAjax.status)
    				}
    			}
    		}
    	}
    }
    <body>
        <input type="button" value="读取" id="btn">
        <hr>
        <ol> //oAjax.readyState
            <li>0 (为初始化)还没有调用open()方法</li>
            <li>1 (载入)已调用send()方法,正在发送请求</li>
            <li>2 (载入完成)send()方法完成,已收到全部响应内容</li>
            <li>3 (解析)正在解析响应内容</li>
            <li>4 (完成)响应内容解析完成,可以在客户端调用了</li>
        </ol>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn')
            oBtn.onclick = function(){
                ajax('aaa.txt?t=' + Date.now(), function(data){
                    alert(data)
                })
            }
        }
    </script>
    </body>

     

    展开全文
  • 本文主要介绍了如何通过原生js的方法实现一个ajax get请求,post请求。 一、什么是ajax Ajax 即Asynchronous Javascript And XML(异步 JavaScript 和 XML),指一种创建交互式、快速动态网页应用的网页开发技术,...

    本文主要介绍了如何通过原生js的方法实现一个ajax get请求,post请求。

    一、什么是ajax

    Ajax 即Asynchronous Javascript And XML异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
    这个地方的XML指的是XMLHttpRequest对象,从ajax的定义中可以获取下面信息:

    • ajax操作的是js和XMLHttpRequest对象
    • 交互式说明和后端有交互,即发送请求,获取数据
    • ajax是个异步的操作

    二、ajax状态

    中,ajax有个特点是交互,怎么判断请求已经完成?可以通过ajax的状态码来解读:

    • 0-未初始化,尚未调用open()方法
    • 1-启动,调用open()方法,已调用send()的方法,正在发送请求
    • 2-发送,已经调用send()方法,已接受到响应
    • 3-解析 正在解析响应数据
    • 4、完成,响应数据解析完成,客户端可以调用;(我们都是使用xhr.readyState == 4 判断ajax请求是否结束)

    三、js原生实现ajax的步骤

    • 创建XMLHttpRequest对象
    • 调用open()方法:接受三个参数,分别是请求类型请求URL是否异步发送请求
    • 调用send()方法发送请求
    • 接受请求

    四、js原生实现ajax get方法

    var xhr = new XMLHttpRequest();
    xhr.open("GET","https://www.baidu.com/s?wd=ajax",true); 
    xhr.send(null);
    xhr.onreadystatechange = function(){
    	if(xhr.readyState == 4 && xhr.status == 200){
    		console.log(xhr.responseText);
    	}
    }
    

    五、js原生实现ajax post方法

    var data
    var xhr = new XMLHttpRequest();
    xhr.open("POST","",true);
    // 添加http头,发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
    xhr.send(data);
    //onreadystatechange:每当readyState改变的时候,onreadystatechange函数就会被执行
    xhr.onreadystatechange = function(){
    	if(xhr.readyState == 4 && xhr.status == 200{
    		console.log(xhr.responseText);
    	}
    }
    
    展开全文
  • 本文主要介绍了如何通过原生JavaScript封装ajax请求,文中给出了具体实现代码和详细解释,希望对你有所帮助。一、JS原生Ajaxajax:一种请求数据方式,不需要刷新整个页面; ajax技术核心 XMLHttpRequest ...
  • 本文主要介绍了如何通过原生JavaScript封装ajax请求,文中给出了具体实现代码和详细解释,希望对你有所帮助。 一、JS原生Ajax ajax:一种请求数据方式,不需要刷新整个页面; ajax技术核心 ...
  • 原生JS Ajax操作

    2017-05-01 15:31:51
    原生JS Ajax Ajax是什么? Ajax用在什么地方? 如何操作? Ajax不是一个新技术! 核心:操作XMLHttpRequest对象 Ajax:异步JavaScript和XML技术,通过JavaScript中异步对象XMLHttpRequest来进行数据请求,得到...
  • 第一步建立ajax的对象,第二部发送请求到后台,第三步后台所编写数据,第四步我们收到后台返回数据处理,第四步返回格式经常有xml和json还有字符串; 封装ajax的函数为了我们以后工作方便使用,...
  • 普通的jQuery中的ajax请求后台,并不能处理Blob类型的数据,这里用的原生的XMLHttpRequest请求后台 这里做报表导出功能的一种实现: //点击-报表导出-执行事件 function reportExport(){ // 获取页面当前选中...
  • JS的Ajax

    2017-05-02 19:39:48
    关于原生JS 的Ajax理解和操作 Ajax什么?Ajax用在什么地方?如何操作? 核心:操作XMLHttpRequest对象 Ajax不是一个新技术! Ajax:异步的JavaScript和XML技术,通过JavaScript中的异步对象...
  • 如何用写原生的ajax

    2019-09-23 22:22:00
    ajax是经过jquery封装,我们可以用原生的js去制定ajax; 大概步骤: 1.建立xmlHttpRequrest连接; 2.请求向台台服务器发送请求; 3.根据服务器返回状态码进行相关操作. 4.返回数据进行格式化; ...
  • 最近在实习的过程中,写了很多的AJAX请求,由于开发的CRM系统,所以很多的东西需要与后台进行请求,所以在前台页面少不了要写很多的AJAX,因为form表单的局限性,所以在很多情况下不使用的!由于本人最近忙于...
  • 什么都不说,直接上两段代码,解开ajax的面纱,来看看原生js的ajax是如何工作的。 //ajax发送GET请求 function ajaxGet(url,callback){ //第一步:创建XMLHttpRequest对象 var request = new XMLHttpRequest(); ...
  • https://zhuanlan.zhihu.com/p/114501873❞一、AJAXajax 全名 Asynchronous JavaScript and XML前后台交互能力也就是我们客户端给服务端发送消息工具,以及接受响应工具异步请求数据web开发技术AJAX ...
  • 用户通过网址或向服务器提交请求,服务器向浏览器发送相应响应 问题:如何通过点击能获取数据并展示在页面上 1.混编模式 2.调用接口 如果不是异步请求会导致页面刷新 二.混编 jsp pthon php 这样前后端...
  • jQuery与Ajax技术 1、先谈谈Ajax有什么用。 ajax 可以在网页交互时异步通信。 就是能在不重新加载网页情况下,去和后台进行数据交互。 ...上面两种情况可以增加用户...这里就不讲原生js实现Ajax的用法,直接使用 js
  • AJAX: Asynchronous Javascript And XML (异步的JS和XML) 一种前后端数据交互手段。 实现原理 基于Ajax的核心对象 xmlHttpRequest ,异步发送一个HTTP请求,去后端服务器获取数据,带回给前端浏览器,然后用...
  • 大家都知道万恶IE在ajax中往往只读取第一次ajax请求时候数据,其余时候都从cache提取数据,(太懒了T_T)。原生的JS清除ajax缓存方法多,但是终觉有点繁琐,如果用jquery同学,就设置一个参数就OK了,那...
  • js分类中有一节【原生js异步请求,XML解析】主要说明了js前台是如何处理XML格式请求和如何接受由服务器返回XML数据解析,今天我将用一个实例来说明具体要如何操作. 前台参数类型也是XML使用是jquery: 1...
  • 想自己用 js写一个原生的ajax请求,访问本地文件:json/txt。但是写了一个后,发现不能读取:原来读取本地文件被识别为跨域,不能读取的。js写的原生ajax 请求代码如下。html代码:将获取的txt 文件 展示出来...
  • 大家都知道万恶IE在ajax中往往只读取第一次ajax请求时候数据,其余时候都从cache提取数据,(太懒了T_T)。原生的JS清除ajax缓存方法多,但是终觉有点繁琐,如果用jquery同学,就设置一个参数就OK了,那...
  • js异步下载文件请求

    2019-02-26 10:16:00
    但是 我们需要下载完成监听,所以必须要异步执行、用常规的ajax是不可以的。我们要用blob对象来实现1.原生如何实现 function loadDown(query) { var url = "${ctx}/bill/billExport"+query; ...
  • 另外js里面是否可以直接做ajax请求,得到数据后直接自己渲染页面。因为js自己写不是很好,还请大神指点一二。</p><p>该提问来源于开源项目:wendux/DSBridge-Android</p></div>
  • 大家都知道万恶IE在ajax中往往只读取第一次ajax请求时候数据,其余时候都从cache提取数据,(太懒了T_T)。原生的JS清除ajax缓存方法多,但是终觉有点繁琐,如果用jquery同学,就设置一个参数就OK了,那...

空空如也

空空如也

1 2 3
收藏数 59
精华内容 23
关键字:

原生js的ajax请求是如何请求