精华内容
下载资源
问答
  • // 原生Ajax Get Post请求 function ajGet(){ // 创建一个 XMLHttpRequest 对象。(这个东西有兼容,需要做兼容的可以去搜下) var xhr = new XMLHttpRequest(); // 打开请求,三个参数,请求方式,请求路径,...
    //	原生Ajax  Get Post请求
    	function ajGet(){
    //		创建一个 XMLHttpRequest 对象。(这个东西有兼容,需要做兼容的可以去搜下)
    		var xhr = new XMLHttpRequest();
    //		打开请求,三个参数,请求方式,请求路径,是否异步
    		xhr.open('get','get.php',true);
    //		get方式发送null或者为空
    		xhr.send(null);
    //		请求结束后,服务器返回数据需要一个回调函数来装
    
    		xhr.onreadystatechange = function(json){
    //			XMLHttpRequest 对象的 readyState 属性加以判断,如果等于4(服务响应成功)
    //			xhr.readyState == 4  是表示后台处理完成了。
    //			xhr.status == 200 是表示处理的结果是OK的。(具体多少成功看后台)
    			if ((xhr.readyState == 4) && (xhr.status == 200)) {
    				console.log('成功');
    			}
    		}	
    	}
    	
    //	xhr.open(method, url, async, username, password)详解
    /*	method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。
    	( 大小写不敏感。)
    	POST:用"POST"方式发送数据,可以大到4MB
    	GET:用"GET"方式发送数据,只能256KB
    	如果请求带有参数的化实用POST方式,POST方式将参数放置在页面的隐藏控件内
    	没有参数使用GET方式
    	对于请求的页面在中途可能发生更改的,也最好用POST方式
    	
    	url 参数是请求的主体。大多数浏览器实施了一个同源安全策略,并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
    	async 参数指示请求使用应该异步地执行。如果这个参数是 false,请求是同步的,后续对 send() 的调用将阻塞,直到响应完全接收。
    	如果这个参数是 true 或省略,请求是异步的,且通常需要一个 onreadystatechange 事件句柄。
    	username 和 password 参数是可选的,为 url 所需的授权提供认证资格。如果指定了,它们会覆盖 url 自己指定的任何资格。
    */
    	
    	function ajPost(){
    		var xhr = new XMLHttpRequest();
    		xhr.open('post','后台.php',true);
    //		post的send需要传输一个json对象
    /*		比如API有https://csdnimg.cn/static/api/js/component/anticheat.js
    		参数有很多随便举几个
    		username为zhangsan
    		age年龄为18等
    */		
    //		创建一个json对象
    		var postJson = {
    			'username':'zhangsan',
    			'age':'18'
    		}
    		xhr.send(postJson);
    		xhr.onreadystatechange = function(){
    			if(xhr.readyState == 4 && xhr.status == 200){
    				console.log('成功!');
    			}else{
    				console.log('失败!');
    			}
    		}
    	}
    	
    //	jQuery  Get Post请求
    //	必需的 URL 参数规定您希望请求的 URL。
    //	可选的 callback 参数是请求成功后所执行的函数名。
    	$.get(url,function(){});
    //	url:待载入页面的URL地址
    //	data:待发送 Key/value 参数。
    //	callback:载入成功时回调函数。
    //	type:返回内容格式,xml, html, script, json, text, _default。
    	$.get(url, [data], [callback], [type])
    	
    /*	get请求
    	$.ajax({
            type: 'get',
            url: 'json/words.json',
            // 是需要传输的数据
            data: {
               id: '111',
               q: 'haha'
            },
            // 发送类型, 默认是form表单格式
            // contentType: 'json',
            success: function(res, text, xhr) {
               console.log('请求成功');
            },
            error: function() {
               // 发送ajax 请求失败,服务端不能做正常的处理
               console.log('请求失败');
            },
            // 无论成功还是失败,都会执行该函数
            complete: function() {
               console.log('请求完成');
            }
    	})
    */
    
    //	必需的 URL 参数规定您希望请求的 URL。
    //	可选的 data 参数规定连同请求发送的数据。
    //	可选的 callback 参数是请求成功后所执行的函数名。
    	$.post(URL,data,callback);
    //	url:发送请求地址。
    //	data:待发送 Key/value 参数。
    //	callback:发送成功时回调函数。
    //	type:返回内容格式,xml, html, script, json, text, _default。
    	$.post(url, [data], [callback], [type]);
    
    //	post请求
    /*    $.ajax({
            type: 'post',
            url: 'xxxx.xxx',
            =====》设置请求格式
            contentType: 'json',
            =====》 如果是post请求, 且为json格式,需要经行格式化,转为json字符串。
        	data: JSON.stringify({
            name: 'xixi',
            	q: 'hahaha'
            }),
            headers: {user_id: 36},
            success: function(res, text, xhr) {
                console.log('请求成功');
            },
            error: function() {
                // 发送ajax 请求失败,服务端不能做正常的处理
                console.log('请求失败');
            },
            // 无论成功还是失败,都会执行该函数
            complete: function() {
               console.log('请求完成');
            }
        })
        */
       
    // jsonp的形式
    /*  $.ajax({
            type: 'get',
            url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
            data: {
                wd: '你好',
                sid: "1422_21080_19897_26350_20927",
            },
            // 预期后台返回的格式
            dataType: "jsonp",
            // 链接中callback的字替换成你传入的值
            jsonp: 'cb',
            // 无论你是jonp,get,post,只要返送请求成功success函数都会调用
            success: function(res, text, xhr) {
                console.log(res);
            },
            error: function() {
                // 发送ajax 请求失败,服务端不能做正常的处理
                console.log('请求失败');
            }
        })
    */

    展开全文
  • Ajax原生GET请求接口: /** * 原生Ajax GET请求 */ function getOrigantAjaxGet() { var oAjax = null; //这里进行HTTP请求,创建异步对象 try { oAjax = new XMLHttpRequest(); } catch (e) { oAjax ...

    Ajax原生GET请求接口:

    /**
     * 原生Ajax GET请求
     */
    function getOrigantAjaxGet() {
        var oAjax = null;
        //这里进行HTTP请求,创建异步对象
        try {
            oAjax = new XMLHttpRequest();
        } catch (e) {
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        };
        //设置请求的参数,包括:请求的方法、请求的url,最后一个参数是是否异步请求
        oAjax.open('get', 'http://' + hostName + ':' + port + '/getList', true);
        //发送请求
        oAjax.send();
        oAjax.onreadystatechange = function () {
            //当状态为4的时候,执行以下操作
            if (oAjax.readyState == 4 && oAjax.status == 200) {
                console.log('数据返回成功');
                // 数据是保存在 异步对象的 属性中
                console.log(oAjax.responseText);
                // 修改页面的显示
                document.querySelector('h1').innerHTML = oAjax.responseText;
            };
        };
    }

    Ajax原生POST请求:

    /**
     * 原生Ajax POST请求
     */
    function getOrigantAjaxPost() {
        var oAjax = null;
        var postData = '{ "name": "value1", "pwd": "value2" }';
        //这里进行HTTP请求
        try {
            oAjax = new XMLHttpRequest();
        } catch (e) {
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        };
        //post方式请求,最后一个参数是是否异步请求
        oAjax.open('post', 'http://' + hostName + ':' + port + '/setList', true);
        //post相比get方式提交多了个这个
        oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //post发送数据和请求
        oAjax.send(postData);
        oAjax.onreadystatechange = function () {
            //当状态为4的时候,执行以下操作
            if (oAjax.readyState == 4 && oAjax.status == 200) {
                console.log('数据返回成功');
                // 数据是保存在 异步对象的 属性中
                console.log(oAjax.responseText);
            };
        };
    }

    接下来看Jquery封装的Ajax的GET请求:

    /**
     * Jquery Ajax GET请求
     */
    function requestAjaxGet() {
        $.ajax({
            type: "get",
            data: "data",
            url: "/a/b",
            dataType: "text",
            success: function (data, status) {
                $("#text").text("success: " + status);
            },
            error: function (e) {
                $("#text").text("error: " + e);
            }
        });
    }

    Jquery封装的Ajax的POST请求:

    /**
     * Jquery Ajax POST请求
     */
    function requestAjaxPost() {
        $.ajax({
            data: {
                name: "Donald Duck",
                pwd: "Duckburg2"
            },
            async: true,
            url: 'http://' + hostName + ':' + port + '/entity/req',
            type: "post",
            dataType: 'JSON',
            success: function (data, status) {
                alert("Data: "+data);
                console.log(data);
            },
            error: function (e) {
                alert("Data: error" + JSON.stringify(e));
            }
        });
    }

    还有一种写法,这种是Jquery对Ajax请求的高级封装,不过只能做简单的GET和POST请求。

    Jquery对Ajax的GET请求的高级封装:

    /**
     * Jquery Ajax GET请求2(高级封装)
     */
    function requestAjaxGet2() {
        $.get("/a/b", function (data, status) {
            $("#text").text("\nStatus: " + status);
        });
    }

    Jquery对Ajax的POST请求的高级封装:

    /**
     * Jquery Ajax POST请求2(高级封装)
     */
    function requestAjaxPost2() {
        $.post('http://' + hostName + ':' + port + '/entity/req',
            {
                name: "Donald Duck",
                pwd: "Duckburg"
            },
            function (data, status) {
                alert("Data: " + data + "\nStatus: " + status);
            });
    }

    前两种的Jquery的Ajax请求更加的灵活,并且功能更多。

     

    展开全文
  • 下面小编就为大家带来一篇深入理解Ajaxget和post请求。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 学习ajax技术的时候,很多同学对于ajax中getpost请求总是疑问不解
  • Get请求,最常用于向服务器查询某些信息 ...Get请求参数在URL显示,大小限制在1024字节以下,请求的数据会被浏览器缓存,其他人可以从浏览器的历史记录读取这些信息,相对于Post请求不安全。 G

    Get请求,最常用于向服务器查询某些信息

    Get请求或涉及到url传递参数时,被传递的参数要经过encodeURLComponent方法处理

    Post请求的频率相对于小于Get请求的频率,一般用于向服务器发送应该被保存的数据


    Get请求参数在URL中显示,大小限制在1024字节以下,请求的数据会被浏览器缓存,其他人可以从浏览器的历史记录中读取这些信息,相对于Post请求不安全。

    Get请求和Post请求在服务器端的区别:Get请求时服务器端使用Request.QueryString()获取参数,Post请求时服务器端使用Request.format()获取数据。

    展开全文
  • 主要介绍了原生 JS Ajax,GET和POST 请求实例代码的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
  • AJAX中get和post请求详解

    千次阅读 2014-11-26 21:33:34
    一、get()和post()基本区别 1.get 是把参数数据队列加到提交表单的ACTION属性所指的URL,值表单内各个字段一一对应,在URL可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内...
    一、get()和post()基本区别
    1.get 是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
    2.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
    3.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,因服务器的不同而异。
    4.get安全性非常低,post安全性较高。 

    二、谈Ajax的Get和Post的区别

         用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。

    Ajax发送请求:如果是get请求send(参数)参数:必须是null或xhr.send();

    GET 请求

    一个简单的 GET 请求:

    xmlhttp.open("GET","demo_get.asp",true);
        xmlhttp.send();
    
          

    在上面的例子中,您可能得到的是缓存的结果。

    为了避免这种情况,请向 URL 添加一个唯一的 ID:

    xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
        xmlhttp.send();
    
          如果您希望通过 GET 方法发送信息,请向 URL 添加信息:

    xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
        xmlhttp.send();
    

     get请求就不必要设置 xhr.setRequestHeader(header,value)

    备注:如果xhr.send(参数);参数不为空情况下,在某些浏览器中会自动转换成post请求方式 您可以通过request.getMethod();方法获取请求的方式     与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

        然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠 
         

       POST 请求

        一个简单 POST 请求:

       xmlhttp.open("POST","demo_post.asp",true);
       xmlhttp.send();
    

    如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

       xmlhttp.open("POST","ajax_test.asp",true);
       xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       xmlhttp.send("fname=Bill&lname=Gates");
    

    实例:

    function getAjax(){ 
    
         //获取xhr对象
         var xhr = getXhr();
         //规定请求类型     
         xhr.open("get","main.jsp?username=123",true);
         //发送请求
         xhr.send();
        //处理服务器响应事件
         xhr.onreadystatechange = function (){
              //判读是否处理完毕 与判读服务器是否处理成功!
              if(xhr.readyState==4 && xhr.status==200){
                        alert(xhr.responseText);
                  }
              }
          } 
    }



    展开全文
  • Ajax中Get请求和Post请求区别

    千次阅读 2014-09-12 15:06:42
    Get请求和Post请求区别
  • Ajax中get请求和post请求区别

    千次阅读 2018-08-03 09:52:48
    Ajax中请求方式有get和post两种,二者的区别可以从传参方式 , 请求头以及参数类型来进行比较   post请求:  get请求: 区别: 1.传参方式:get请求在url的尾部传递参数,而post请求在send方法传递参数. 2....
  • Ajax中Get请求与Post请求区别 写在前面的话 我们在使用Ajax时,当我们向服务器发送数据时,我们可以采用Get方式请求服务器,也可以使用Post方式请求服务器.那么,我们什么时候该采用Get方式,什么时候该采用Post方式...
  • 那么,Get请求和Post请求区别到底在哪呢?GET请求 get是最常见的请求,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器,对XHR而言,位于传入open( )方法的...
  • Ajax中get和post区别

    2013-01-25 18:28:12
    Ajax中Get请求和Post请求区别 简单例子 何时使用Get请求,何时使用Post请求
  • Ajax GetPost请求

    2018-07-05 17:00:00
    Ajax GetPost请求 Ajax GetPost请求 Ajax GetPost请求
  • ajax中GET请求和POST请求参数区别

    千次阅读 2018-07-02 15:14:27
    那么,Get请求和Post请求区别到底在哪呢? GET请求 get是最常见的请求,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器,对XHR而言,位于传入op...
  • Ajax中get和post 的写法: 1.ajax中get请求写法(js原生) //1.创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); //2.设置请求参数("传输的方式","文件的地址","是否异步") xhr.open("get","ajax_get....
  • 简单封装ajaxget和post请求

    千次阅读 2017-03-08 10:39:39
     每次在做项目的时候,在ajax这块,都是用的jqury框架本身封装的$.ajax,$.get,$.post等方法进行异步请求,但是还是想知道他到底是怎么进行异步请求的封装,于是自己动手封装了个最简单的getpost请求GET请求...
  • ajax jsonp get和post请求

    千次阅读 2018-09-20 10:39:47
    准备用ajax请求后台数据,但是发现一直请求失败。最后发现原因是,后台返回的json必须通过回调才行。 1,get请求 $.ajax({  type:"GET",  url:"http://192.168.1.117/test.php",  dataType:&...
  • ajax中getpost请求区别

    千次阅读 2015-11-04 10:35:20
    一、get()和post()基本区别 1.get是把参数数据队列加到提交表单的ACTION属性所指的URL,值表单内各个字段一一对应,在URL可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内...
  • JQuery 使用 Ajax 发送 GETPOST 请求

    万次阅读 多人点赞 2019-05-11 14:18:24
    Ajax = 异步 JavaScript XML 一种用于创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 Why to useAjax ? 可以在不重新加载整个网页的情况下,对网页的某部分进行...
  • Ajax get 请求与 post 请求的区别 GET请求的参数是放在URL里的,POST请求参数是放在请求body里的; GET请求的URL传参有长度限制,而POST请求没有长度限制; GET请求的参数只能是ASCII码,所以中文需要URL编码,...
  • 原生JS的Ajax中get和post区别

    千次阅读 2019-06-03 20:59:01
    浅谈get和post请求区别: 首先这两种请求方式名字都有所区别;其次在AJAX异步网络请求get和post的传参方式不同,get是在url,而post是在send里面。get请求因为数据参数是报录在url的,所以安全性较低,...
  • 本篇文章是对ajax请求getpost区别进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • 原创:Ajax中getpost请求详解

    千次阅读 热门讨论 2011-03-29 07:38:00
    学习ajax技术的时候,很多同学对于ajax中getpost请求总是疑问不解,为了给学员解决疑问,现将授课get与post的请求的总结发表于学生大本营,希望能给你带来帮助. 一、get()post()基本区别1.get是把参数数据...
  • ajax中get请求与post请求区别

    千次阅读 2018-04-04 21:31:29
    关于ajax中get请求与post请求区别可以从传参方式,请求头,参数值类型等方面分析。post请求://请求地址 var url = '01.php'; //open参数为post xhr.open('post',url); //设置请求头 xhr.setRequestHeader('...
  • 在前端面试,常常会问到GETPOST请求区别,现简单总结如下:(1)GET请求将参数在URL后进行传递,POST请求则是作为HTTP消息的实体内容发送给Web服务器。(2)GET方式对传输的数据大小有限制,通常不能大于2KB,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 160,420
精华内容 64,168
关键字:

ajax中get和post请求的区别