原生JS AJAX POST请求和GET请求的详细讲解和不同之处

  • Post author:
  • Post category:其他




什么是AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。


客户端与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术



GET请求

var xhr = null  // 创建一个xhr空变量

// 1.处理兼容问题  使用try{}catch(error){} 要比if(){}else{}性能更好
try{
    xhr = new XMLHttpRequest() // IE8以上会进入此区间
}catch(error){
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  // IE8以下会进入此区间
}

// 2.初始化  
/*
	参数一 使用get方式 还是 使用post方式  
	参数二 写 url地址
	参数三 false(同步) 还是 true(异步) 默认为true(异步)
*/
xhr.open('get','1.php?name="zhangsan"&age=18',false)

// 3.发送 '名称=值&名称=值&名称=值'
xhr.send('x=7&y=9')

// 4.响应数据
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
        if(xhr.status ==200){
            // 状态码 200代表请求成功,一般用于GET与POST请求
            // 404代表没有找到页面
            console.log(xhr.response)
        }
    }
}



POST请求

var xhr = null  // 创建一个xhr空变量

// 1.处理兼容问题  使用try{}catch(error){} 要比if(){}else{}性能更好
try{
    xhr = new XMLHttpRequest() // IE8以上会进入此区间
}catch(error){
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  // IE8以下会进入此区间
}

// 2.初始化  
/*
	参数一 使用get方式 还是 使用post方式  
	参数二 写 url地址
	参数三 false(同步) 还是 true(异步) 默认为true(异步)
*/
xhr.open('post','1.php?name="zhangsan"&age=18',true)

// 如果使用 post 方法需要设置请求头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 3.发送 '名称=值&名称=值&名称=值'
xhr.send('x=7&y=9')

// 4.响应数据
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
        if(xhr.status ==200){
            // 状态码 200代表请求成功,一般用于GET与POST请求
            // 404代表没有找到页面
            console.log(xhr.response)
        }
    }
}



POST请求和GET请求的不同之处

  1. get是从服务器上获取数据(会暴露客户端ip),post是向服务器传送数据。
  2. get是把参数数据队列加到提交表单的action属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程。
  3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
  4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
  5. get安全性非常低,post安全性较高。但是执行效率却比post方法好。



建议:

  1. get方式的安全性较post方式要差些,包含机密信息的话,建议用post数据提交方式
  2. 在做数据查询时,建议用get方式;而在做数据添加、修改或删除时,建议用post方式



版权声明:本文为chen4565原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。