精华内容
下载资源
问答
  • 2.data传输的参数必须为json字符串,也就是'{"name":"tom","money":"1200"}' 3.Controller中的方法的接收参数必须采用@RequestBody接收 4.打开F12,发现传过去的参数类型是request Payload <!--springmvc相关...

    方法一

    1.ajax中指定contentType为"application/json;charset=utf-8",
    2.data传输的参数必须为json字符串,也就是'{"name":"tom","money":"1200"}'
    3.Controller中的方法的接收参数必须采用@RequestBody接收
    4.打开F12,发现传过去的参数类型是request Payload
    
    <!--springmvc相关依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>5.2.4.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>5.2.4.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.4.RELEASE</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>
    
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <!--jackson的相关依赖-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.8</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.8</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.9.8</version>
    </dependency>
    <!--lombok的相关依赖-->
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.12</version>
      <scope>compile</scope>
    </dependency>
    
    <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <html>
    <head>
        <title>Title</title>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script>
             $(function () {
                $("#btn_submit").click(function () {
                    $.ajax({
                        url:"/account/saveAccount",
                        contentType:"application/json;charset=utf-8",
                        data:'{"name":"tom","money":"1200"}',
                        dataType:"json",
                        type:"post",
                        success:function (data) {
    
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <button id="btn_submit">提交</button>
    </body>
    </html>
    
    package com.bianyiit.pojo;
    
    import lombok.Data;
    
    @Data
    public class Account {
        private Integer id;
        private String name;
        private Double money;
    }
    
    package com.bianyiit.web;
    
    import com.bianyiit.pojo.Account;
    import com.bianyiit.service.AccountService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.List;
    
    @Controller
    @RequestMapping("/account")
    public class AccountController {
    
        @RequestMapping(path = "/saveAccount")
        public void saveAccount(@RequestBody Account account){
            System.out.println(account);
        }
    }
    

    方法二

    1.不采用$("#regisForm").serialize()方式获取表单数据,而是通过字符串拼接的方式手写一个Json字符串,但是这种方式太繁琐,因为如果表单中的数据太多,需要一个一个手写,这不太现实
    2.var name= $("#name").val(); var money=$("#money").val();
    3.data类型为'{"name":"'+name+'","money":"'+money+'"}'
    4.contentType为application/json;charset=UTF-8
    5.后台接收需要使用@RequestBody修饰
    
    <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <html>
    <head>
        <title>Title</title>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script>
            $(function () {
                $("#btn_submit").click(function () {
                    var name= $("#name").val();
                    var money=$("#money").val();
                    $.ajax({
                        url:"/account/saveAccount",
                        contentType:"application/json;charset=UTF-8", 
                        data:'{"name":"'+name+'","money":"'+money+'"}',
                        dataType:"json",
                        type:"post",
                        success:function (data) {
                            
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <form id="regisForm">
            姓名:<input type="text" name="name" id="name">
            金钱:<input type="text" name="money" id="money">
        </form>
        <button id="btn_submit">提交</button>
    </body>
    </html>
    
    package com.bianyiit.web;
    
    import com.bianyiit.pojo.Account;
    import com.bianyiit.service.AccountService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.List;
    
    @Controller
    @RequestMapping("/account")
    public class AccountController {
    
        @RequestMapping(path = "/saveAccount")
        public void saveAccount(@RequestBody Account account){
            System.out.println(account);
        }
    }
    

    方法三

    1.正确演示过程

    1.ajax中指定contentType为"application/json;charset=utf-8",
    2.data传输的参数必须为json字符串,但是可以在ajax提交数据之前通过写initSerializeObject()方法初始化对象
    3.data此时的传输类型为JSON.stringify($("#regisForm").serializeObject())
    3.Controller中的方法的接收参数必须采用@RequestBody接收
    4.打开F12,发现传过去的参数类型是request Payload,传过去的参数类型和方法一的一致
    
    <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <html>
    <head>
        <title>Title</title>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script>
            function initSerializeObject() {
                $.fn.serializeObject = function () {
                    var o = {};
                    var a = this.serializeArray();
                    $.each(a, function () {
                        if (o[this.name]) {
                            if (!o[this.name].push) {
                                o[this.name] = [o[this.name]];
                            }
                            o[this.name].push(this.value || '');
                        } else {
                            o[this.name] = this.value || '';
                        }
                    });
                    return o;
                };
            }
            $(function () {
                // 初始化、序列化对象的方法
                initSerializeObject();
                $("#btn_submit").click(function () {
                    $.ajax({
                        url:"/account/saveAccount",
                        contentType:"application/json;charset=utf-8",
                        data:JSON.stringify($("#regisForm").serializeObject()),
                        dataType:"json",
                        type:"post",
                        success:function (data) {
                           
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <form id="regisForm">
            姓名:<input type="text" name="name" id="name">
            金钱:<input type="text" name="money" id="money">
        </form>
        <button id="btn_submit">提交</button>
    </body>
    </html>
    
    package com.bianyiit.web;
    
    import com.bianyiit.pojo.Account;
    import com.bianyiit.service.AccountService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.List;
    
    @Controller
    @RequestMapping("/account")
    public class AccountController {
    
        @RequestMapping(path = "/saveAccount")
        public void saveAccount(@RequestBody Account account){
            System.out.println(account);
        }
    }
    

    2.错误演示过程

    如果指定contentType为"application/json;charset=utf-8",指定data为JSON.stringify($("#regisForm").serialize())或者data为$("#regisForm").serialize()
    那么此时提交的数据格式如下所示并且返回400
    原因分析:因为后台如果指定了@RequestBody,那么接收的数据必须为json字符串格式,而我们传过去的是name=tom&money=1000,所以肯定会出错,唯一的办法就是我们自己手写一个初始化方法将其转换成{name: "tom", money: "7855"}
    


    如果contentType中的分号也成了逗号,也就是contentType为"application/json,charset=utf-8",那么就会报415:不支持的媒体类型
    

    方法四:这种方法应该是SSM框架结合异步提交表单中最常用的方式

    设置contentType为application/x-www-form-urlencoded
    设置data为$("#regisForm").serialize()
    在Controller里面的方法接收的参数不能使用RequestBody修饰
    此时前端传输的参数放在data form中
    
    <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <html>
    <head>
        <title>Title</title>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script>
            $(function () {
                $("#btn_submit").click(function () {
                    $.ajax({
                        url:"/account/saveAccount",
                        contentType:"application/x-www-form-urlencoded", 
                        data:$("#regisForm").serialize(),
                        dataType:"json",
                        type:"post",
                        success:function (data) {
                            
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <form id="regisForm">
            姓名:<input type="text" name="name" id="name">
            金钱:<input type="text" name="money" id="money">
        </form>
        <button id="btn_submit">提交</button>
    </body>
    </html>
    
    package com.bianyiit.web;
    
    import com.bianyiit.pojo.Account;
    import com.bianyiit.service.AccountService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.List;
    
    @Controller
    @RequestMapping("/account")
    public class AccountController {
    	//这里千万别用@RequestBody修饰接收的参数
        @RequestMapping(path = "/saveAccount")
        public void saveAccount(Account account){
            System.out.println(account);
        }
    }
    

    方法四和方法一、二、三不同,方法一二三提交的格式是request Payload,方法四提交的格式是Form Data

    展开全文
  • 异步请求方式

    2017-09-12 17:09:35
    其中$.ajax允许get/post两种请求方式,$.get()只允许get请求,$.post()只允许post请求方式异步请求所需要的常用要素: a、url (访问url) b、dataType(数据传输方式) c、success成功之后的回调函数。 ...
    异步请求的方式,常用的有三种,如$.ajax()、$.post()、$.get()
    其中$.ajax允许get/post两种请求方式,$.get()只允许get请求$.post()只允许post请求方式

    异步请求所需要的常用要素:
    a、url (访问url)   b、dataType(数据传输方式)   c、success成功之后的回调函数。

    $.ajax使用示范代码(由于异步请求的参数较多,实例只是常用参数,下同)。


    设接口url
    var url='/test/test.do';   //下面的实例代码都用此访问接口url
    $.ajax({
         url:url,
         dataType:'text',
         success: function(data){
                   (请求成功之后的前端处理代码)
           }
    });

    $.post使用示范代码
    $.post(url, { name: "John", time: "2pm" },   function(data){ 
             alert("Data Loaded: " + data); 
     },'text');

    $.get使用实例代码
    $.get(url, { name: "John", time: "2pm" },  function(data){
                  alert("Data Loaded: " + data);
     });
    展开全文
  • 总线数据传输方式

    千次阅读 2017-08-20 12:36:00
    总线数据传输方式 同步式数据输入输出 主从模块强制同步,选择慢的模块为基准时钟来同步,一般适用于总线较短的情况。 异步通信 模式:请求=>应答 不互锁方式:不管是否接到请求或应答,都不再次请求或应答 缺点...

    总线数据传输方式


    • 同步式数据输入输出
      主从模块强制同步,选择慢的模块为基准时钟来同步,一般适用于总线较短的情况。
    • 异步通信
      模式:请求=>应答
      不互锁方式:不管是否接到请求或应答,都不再次请求或应答
      缺点:不可靠
      半互锁方式:没有接到请求,连接会保持,没有接到应答,一段时间就会断开连接
      缺点:会是请求信号保持高电平
      全互锁方式:接到请求或应答才会撤销
    • 半同步通信(同步异步结合)
      同步 :发送方用系统前沿时钟发送信号,接收方用系统后沿时钟接收信号
      异步:加入等待信号
      缺点:等待时总线有浪费
    • 分离式通信
      模式:加入总线使用权申请(磁头与磁道匹配,指定扇区转到磁头下面),谁有使用权,谁是主模块
      特点:各个模块有权申请占用总线,采用同步方式通信,不等待对方回答,准备数据时,不占用总线

    展开全文
  • 一、学习的新认识今天学习了前端中与后端交互的重要环节ajax异步请求,同时也学习了最流行的跨域方式JSONP。自己新的认识有以下几点:json和js对象联系和区别 json是js提出的轻量级跨平台的数据交换/传输/存储格式,...

    一、学习的新认识

    今天学习了前端中与后端交互的重要环节ajax异步请求,同时也学习了最流行的跨域方式JSONP。自己新的认识有以下几点:

    json和js对象联系和区别 json是js提出的轻量级跨平台的数据交换/传输/存储格式,它解决了xml格式中标签过多导致网络传输量过大的问题,是目前最欢迎,支持最广的。不仅Javascript,其它如C、C++、C#、Java、PHP和Python都提供了编程接口对它的支持。

    ajax的post请求三种方式 跟着老师理解了前端和后端交互的三种方式:是默认键值对方式、JSON方式和最简单的FormData对象方式,尤其是FormData方式是推荐方式,相比于普通ajax方式,它序列化数据直接被ajax识别传输,不用再要转为字符串,在后端也直接自动识别。

    JSONP跨域请求 基于”同源策略”浏览器禁止使用JS脚本(Ajax)发起跨域请求,通过JSONP可以实现跨域请求数据,即使后端不支持跨域情况下。老师讲了JSONP的原理,但没讲怎么使用,我一直疑惑JSONP的回调函数的关键名从哪里来,直到在网上看了百度JSONP接口才明白。文中对后端跨域和JSONP跨域进行了区别,并实例演示了真实案例。

    二、JSON

    1、JSON是什么JSON: JavaScript Object Notation(JS 对象表示法)

    跨平台跨语言的 轻量级数据交换/传输/存储格式 ,相比于XML,没有多余的标签,减少了数据体积,提高了效率。

    JSON 独立于任何编程语言, 几乎所有编程语言都提供了访问JSON数据的API接口,如JS的JSON.parse和JSON.stringify,PHP的json_decode和json_encode。

    尽管 JSON 与 JS 并无直接关系,但 JSON 在 JS 代码中应用最广泛

    其实json就是字符串,不过它是符合json格式的字符串 ,有时我们称json为json字符串 。

    JSON格式:

    大括号或中括号 包裹。大括号 {}存储对象字面量 ,中括号 []存储数组字面量 。

    键-值对 json中都是键值对表示数据,键和值以:冒号分隔 ,键值对以,逗号分隔 ,并且最后一个键值对后不能有逗号 。

    键名必须用英文双引号 包裹。 不管键名是否合法的js标识符都要用双引号包裹键名,单引号和没有引号都不是json格式,这点要与js对象区别开来。

    值可以是数值、字符串、布尔、null、对象和数组 注意没有undefined。

    值是字符串时要用英文双引号 包裹。 js对象中可用单引号或双引号,在json中若值是字符串则必须要用双引号。

    不能有注释 不能在json之间注释,因为它本身就是字符串,注释后就不符合json格式了。

    2、js对象和json字符串

    如下是典型的js对象定义:

    constuser={

    name:'woxiaoyao',

    age:28,

    "first job":'worker',

    isJob:true,

    comment:null,

    }

    转化为json字符串时,要除掉const user=,给所有键名加上双引号,值中有单引号改为双引号,最后一个逗号除掉。于是就是下面形式

    {

    "name":"woxiaoyao",

    "age":28,

    "first job":"worker",

    "isJob":true,

    "commen":null

    }

    在javascript中专门提供了两个方法实现了json字符串和js格式对象互转。

    JSON.parse(jsonStr) 将json字符串转换为js对象

    JSON.stringify(jsObj) 将js对象转换为json字符串

    两者怎么记忆呢?我之前有时分不清,如果你像我一样,可这样记忆,因为string是字符串的意思,所有stringify最终结果是字符串,所有可以区分parse和stringify二个作用了。

    三、ajax异步请求

    Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    它依赖XMLHttpRequest对象 ,XMLHttpRequest是浏览器提供的,处理异步请求的宿主对象,而非 JS 内置对象

    1、ajax的GET请求ajax的GET请求流程:

    创建请求对象: new XMLHttpRequest()

    监听请求回调: onreadystatechange

    初始化请求参数: open(请求类型,请求地址,是否异步)

    发送请求: send()

    前后端数据传输: json字符串 ,不同语言都支持json字符串

    前后端数据处理: 接受到数据后先通过自己的JSON编程接口转为自己语言的对象,再进行处理。如javascript的JSON.parse()和PHP的json_decode()。

    constform=document.querySelector('form');

    constbtn=document.querySelector('button');

    btn.addEventListener('click',ajaxGet,false);

    // ajax的Get请求流程分四步:

    // 1. 创建请求对象: `new XMLHttpRequest()`

    constxhr=newXMLHttpRequest();

    // 2. 监听请求回调: `onreadystatechange`

    xhr.addEventListener('readystatechange',show,false);

    functionajaxGet(ev){

    if(form.children[1].value){

    let url='data/index.php';

    url=url.concat('?','name=',form.children[1].value);

    // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)` true表示异步

    xhr.open('GET',url,true);

    // 4. 发送请求: `send()`

    xhr.send();

    }

    }

    functionshow(ev){

    if(xhr.readyState==4){

    // 返回的数据在xhr.responseText

    console.log(xhr.responseText);

    }

    }

    b00ecd035ed06bedcad442d29f641fa3.png

    2、ajax的POST请求ajax的POST请求流程:

    创建请求对象: new XMLHttpRequest()

    监听请求回调: onreadystatechange

    初始化请求参数: open(请求类型,请求地址,是否异步)

    设置请求头: setRequestHeader()

    发送请求: send()

    post 与 get 相比, 多了一步: 设置请求头

    前后端数据传输: json字符串 ,不同语言都支持json字符串,调用接口转为JSON字符串再传输。如JSON.stringify和PHP的json_encode()。

    前后端数据处理: 接受到数据后先通过自己的JSON编程接口转为自己语言的对象,再进行处理。如javascript的JSON.parse()和PHP的json_decode()。

    请求方式:json 数据以表单数据类型发送, 前端请求头是application/x-www-form-urlencoded, 后端用$_POST 接收。

    json 数组就是以JSON发送, 前端请求头是application/json;charset=utf-8(json只支持utf-8编码), 后端用php://input 流文件方式接收

    constform=document.querySelector('form');

    constbtn=document.querySelector('button');

    btn.addEventListener('click',ajaxPost,false);

    // ajax的Post请求流程分五步:

    // 1. 创建请求对象: `new XMLHttpRequest()`

    constxhr=newXMLHttpRequest();

    // 2. 监听请求回调: `onreadystatechange`

    xhr.addEventListener('readystatechange',show,false);

    functionajaxPost(ev){

    let url='data/index2.php';

    // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)` true表示异步

    xhr.open('POST',url,true);

    // 4. 设置请求头: `setRequestHeader()`

    // 第一种:以表单键值对的方式发送数据

    // xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

    // 第二种:以json方式发送

    xhr.setRequestHeader('content-type','application/json;charset=utf-8');

    let $user={

    name:'admin',

    password:'123456',

    };

    // 转换为json字符串

    let data=JSON.stringify($user);

    // 5. 发送请求: `send()`

    xhr.send(data);

    }

    functionshow(ev){

    if(xhr.readyState==4){

    // 返回的数据在xhr.responseText

    console.log(xhr.responseText);

    }

    }

    e4299f1faee67efe510e9e91a67d781c.png

    3、FormData对象

    前端ajax的post请求时能不能不写请求头, 服务器端php还能用$_POST来接收呢?答案是可以的,就是使用FormData对象直接序列化表单数据,将表单数据进行封装后统一提交,可直接被 Ajax 识别,所以可以不设置请求头。除了表单数据外,也可用于普通数据。

    // 第三种:formData对象方式,不用设置请求头,由浏览器自行判定,上面代码中请求可不用设置,数据直接通过FormData提交。

    constform=document.querySelector('form');

    constbtn=document.querySelector('button');

    btn.addEventListener('click',ajaxPost,false);

    // ajax的Post请求流程分五步:

    // 1. 创建请求对象: `new XMLHttpRequest()`

    constxhr=newXMLHttpRequest();

    // 2. 监听请求回调: `onreadystatechange`

    xhr.addEventListener('readystatechange',show,false);

    functionajaxPost(ev){

    let url='data/index2.php';

    // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)` true表示异步

    xhr.open('POST',url,true);

    // 4. 发送请求: `send()`

    // 第三种:formData对象方式,不用设置请求头,由浏览器自行判定,

    xhr.send(newFormData(form));

    }

    functionshow(ev){

    if(xhr.readyState==4){

    // 返回的数据在xhr.responseText

    console.log(xhr.responseText);

    }

    }

    FormData是XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。

    利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的name和value组装成一个queryString;

    异步上传二进制文件。

    与普通Ajax相比,使用FormData的最大优点:可以异步上传二进制文件。

    下面对FormData对象进行拓展介绍

    创建FormData对象方式:

    let formdata = new FormData(); 创建一个空的FormData对象,可以使用formdata.append(key,value)来添加数据。

    let formdata = new FormData(form); 使用已有的表单来初始化一个FormData对象。

    操作方法:

    获取数据formdata.get(key)

    formdata.get(“username”); //获取key为username的第一个值

    formdata.getAll(“username”); //获取key为username的所有值,返回一个数组

    添加数据formdata.append(key,value)

    formdata.append(“k1”,”v1”);

    formdata.append(“k1”,”v2”);

    formdata.append(“k2”,”v2”);

    formdata.getAll(“k1”); //[“v1”,”v2”]

    formdata.get(“k2”); //“v2”

    设置/修改数据formdata.set(key,value) 如果key不存在则新增一条数据,如果存在,则会修改对应的value值。

    formdata.append(“k1”,”v1”);

    formdata.set(“k1”,”v2”);

    formdata.get(“k1”); //“v2”

    判断是否存在某条数据formdata.has(key) ,存在返回true,不存在返回false。

    formdata.append(“k1”,”v1”);

    formdata.has(“k1”); //true

    formdata.has(“k2”); //false

    删除数据formdata.delete(key)

    formdata.append(“k1”,”v1”);

    formdata.delete(“k1”);

    formdata.get(“k1”); //null

    遍历 通过entries()或values()来获取一个遍历器

    formdata.append(“k1”,”v1”);

    formdata.append(“k2”,”v2”);

    for(let [key,value] of formdata.entries()){

    console.log(key +”:”+ value)

    }

    const btn = document.querySelector("#upload-btn");

    btn.onclick = function(){

    let file = document.querySelector("#upload");

    let formdata = new FormData();

    formdata.append("file",file.files[0]);

    fetch("https://www.baidu.com",{

    method:'POST',

    body:formdata

    }).then(d=>{

    console.log("result is" + d);

    alert("上传成功");

    })

    }

    四、JSONP实现跨域请求跨域请求:

    为了安全, 通过脚本发起的请求必须基于”同源策略”

    浏览器禁止使用 JS 脚本(Ajax)发起跨域请求(跨域资源共享)

    但是通过html中带有src属性的标签跨域请求不能禁止的,毕竟这是互联网发明初衷。

    同源策略: 协议, 域名, 端口 三者完全相同, 则认为他们遵循了”同源策略”,否则如下面则认为不同源。

    协议不同(http和https)

    https://www.php.cn:443 /course/812.html

    http:// www.php.cn:443 /course/812.html

    1、JSONP原理演示JSONP:(JSON with Padding)

    script标签允许跨域请求脚本:

    动态生成

    在跨域访问的服务器脚本中(如 php),将数据转为 json 格式,直接返回给前端处理就可以了

    名字:

    密码:

    跨域请求

    constform=document.querySelector('form');

    constbtn=document.querySelector('button');

    btn.addEventListener('click',createScript,false);

    functioncreateScript(){

    constscript=document.createElement('script');

    let name=form.children[1].value;

    if(name.length<1)returnfalse;

    script.src=`http://blog.io/index.php?name=${name}&jsonp=show`;

    document.head.appendChild(script);

    }

    functionshow(data){

    console.log(data);

    form.children[3].value=data.email;

    }

    // 后端

    $users=[

    ['id'=>1,'name'=>'admin','email'=>'admin@php.cn'],

    ['id'=>2,'name'=>'peter','email'=>'peter@php.cn'],

    ['id'=>3,'name'=>'jack','email'=>'jack@php.cn'],

    ];

    // 查询条件

    $name=$_GET['name'];

    // js回调

    $callback=$_GET['jsonp'];

    foreach($usersas$user){

    if($user['name']==$name){

    $result=$user;

    break;

    }

    }

    $data=json_encode($result);

    // 创建一条js函数的调用语句返回

    // echo "函数名(参数)";

    echo"{$callback}({$data})";

    f41e3b84bbe86a904767ff2650d37e58.gif

    2、 JSONP的应用场景

    写这篇文章之前这个问题深深困扰着我,老师只介绍了JSONP的原理,对其应用只是一句话带过,说可以查询天气。因为我是做后端的,知道RestfulAPI一般都会设置支持跨域,其实PHP支持跨域很简单,就是在PHP源码中加上下面代码就可以了,也就是CORS。

    // 跨域请求

    header('Content-Type: text/html;charset=utf-8');

    // 代表允许任何网址请求

    header('Access-Control-Allow-Origin:*');

    // 允许请求的类型

    header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE');

    // 设置是否允许发送 cookies

    header('Access-Control-Allow-Credentials: true');

    // 设置允许自定义请求头的字段

    header('Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin');

    对于后端支持跨域请求的,就没必要在前端再跨域请求了,那么后端不支持跨域请求的,如天气网站的数据,我们JSONP的回调函数的键名如何得到,是后端公开吗?明显不可能,还有就是API的格式。最后我在一篇介绍各搜索引擎的JSONP时才发现,JSONP能工作要有以下几点:

    首先要抓取提供JSONP服务的api,包括关键字和回调键名,这样我们可以提供查询数据和声明回调函数。

    通过上面JSONP的script的创建,模拟后端合法的用户 ,后端在执行echo时会调用我们的声明函数,从而得到数据。

    对于不提供JSONP服务的,如主流的RestfulAPI的,JSONP就没办法了。

    下面实战演示搜索时调用百度的搜索词联想功能

    *{

    margin:0px;

    padding:0px;

    }

    li{

    list-style:none;

    }

    #wrap {

    width:600px;

    height:40px;

    margin:100pxauto;

    }

    #text {

    width:500px;

    height:34px;

    margin:0auto;

    line-height:34px;

    }

    #list {

    width:500px;

    border:1pxsolid#ccc;

    }

    #list > li {

    width:500px;

    height:30px;

    line-height:30px;

    }

    #list > li > a {

    text-decoration:none;

    }

    展开全文
  • a、url (访问url) b、dataType(数据传输方式) c、success成功之后的回调函数。 3.$.ajax使用示范代码 设接口url var url='/test/test.do'; //下面的实例代码都用此访问接口url $.ajax({ ...
  • Ajax——同步请求异步请求

    千次阅读 2020-09-18 10:53:13
    浏览器和服务器之间数据传输方式 同步方式 异步方式 两种方式有什么不同? 同步请求,服务器响应时,页面整体刷新 异步请求,服务器响应时,页面局部刷新 异步请求有什么优点? 异步请求可以...
  • 它通过异步方式在客户端和服务端之间传输数据,从而避免页面资源持续不间断(一窝蜂)地下载。 它甚至可以只用一个HTTP请求就获取整个页面的资源。multipart XHR 选择合适的传输方式和最有效的数据格式,可以...
  • 与jquery的区别是:jquery封装了XMLHttpRequest对象的get请求。$.get(), data就是接受到的数据 Verufy.jsvar xmlhttp;//创建不同浏览器的xmlhttprequest对象 function createXMLHttpRequest(){ //针对fiefor,...
  • * 异步POST请求:以body方式,支持数组 * * @param url 请求的url * @param body body数据 * @param success 成功回调 * @param failure 失败回调 */ + (void)postWithUrl:(NSString *)url body:(NSData...
  • ajax的问题一会再说,今天我突然想到,我们平时都会 尽量的去 用ajax使用异步方式请求数据, 那么你知道到底是同步请求数据更快,还是异步请求数据更快吗? 异步传输是面向字符的传输,它的单位是字符;...
  • JS的异步传输

    2018-05-19 20:09:00
    常规的异步传输方式,适用于大部分场景 原理:通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JS来操作DOM而更新页面 (1).AJAX的优点<1>.无刷新更新数据<2>.异步与服务器通信&...
  • AJAX异步请求

    2017-06-12 22:29:54
    AJAX:异步请求  法语:(通过jquery.min.js)  $.ajax( {  url:’xxx.php’  // 或者什么路径(node.js)  data:{name:xxx,pass:xxx}, //后台发送的数据,JSON形式传输  type:’get’  // 传输的...
  • 通过XMLHttpRequest生成的请求可以有两种方式来获取数据异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false,则该XMLHttpRequest请求以...
  • 1,js向flash发请求2,flash请求服务器端数据(因为flash的跨域只需要在目标服务器的根目录放一个xml,而不需要写代理)3,flash取得数据后再回调js的方法,这样就完成了一次异步请求另外在获取服务器端数据的过程中...
  • 概要:Ajax异步请求数据之前就听朋友提起过,但是之前一直没有什么机会使用这个技术,就没有去了解,后面在...常规使用form表单进行数据的提交:一般情况下要实现前端向后端发送数据,常用的有两种传输数据方式:P...
  • 一、在当前html页面显示请求数据1.get方式请求 ,不传递参数2.get方式请求 ,传递参数3.post方式请求 ,不传递参数4.post方式请求 ,传递参数二、通过按钮跳转到php页面显示请求数据 5.get方式请求 ,传递参数 ...
  • 传输数据是用的暗文还是明文? AJAX请求数据步骤: var xhr = new XMLHttpRequest(); //创建一个异步对象 xhr.open("Get", "test.ashx", true);//Get 方式括号中的三个参数分别为:1.发送请求方式 2.样...
  • 异步请求 ajax的使用详解

    万次阅读 2016-08-31 08:29:20
    异步是值:发送方发出数据后,不等接收方发回响应,接着发送下一个数据包的通讯方式。同步是指:发送方发出数据后,等待接收方发回响应以后才发下一个数据包的通讯方式。 也可以理解为: 异步传输:你传吧,我去...
  • 同步请求:发送方发送数据包后,等待接收方发回响应之后,才能发送下一个数据包的通信方式。...异步通信:不要求通信双方同步,双方可采用各自的时间源,遵循异步通信协议,以字符为数据传输单位,...
  • 这篇文章我们将前进一大步,使用异步方式来对服务端编程,以使它成为一个真正意义上的服务器:可以为多个客户端的多次请求服务。但是开始之前,我们需要解决上一节中遗留的一个问题。 消息发送时的问题 这个问题...
  • XMLHttpRequest 让发送一个HTTP请求变得非常容易。...通过XMLHttpRequest生成的请求可以有两种方式来获取数据异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值
  • 主要研究具有不同传输速率的多路同步数据和异步数据的无线传输,具体地,将具有2Mb/s和4Mb/s的2路同步数据和8路9.6kb/s的异步数据合并起来进行无线传输。重点研究传输的硬件接口设计和组帧方式。采用ALTERA公司的FPGA...
  • 网络请求方式: 1、GET: (1)通过网址字符串给服务器传输数据;  (2)网络字符串最多255字节;  (3)所有传输给服务器的数据,显示在网址里,类似于密码的明文输入,直接可见。 2、POST:(1)通过Data给服务器传输数据...
  • 这篇文章我们将前进一大步,使用异步方式来对服务端编程,以使它成为一个真正意义上的服务器:可以为多个客户端的多次请求服务。但是开始之前,我们需要解决上一节中遗留的一个问题。 消息发送时的问题 这个问题...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 586
精华内容 234
关键字:

异步数据传输请求方式