JS中的Ajax操作实例,get方式和post方式对比
2014-09-11 00:11
411 查看
AJAX有另外一个名字叫XML HTTP请求,是微软首先创建的。
注意:
所有的名称和值都要经过编码后才能添加到URL中,使用encodeURIComponent()进行编码。
由于URL最长为2048字节即2KB,所以get方式不适合发送大量数据。
2、post是第二常见的方式,一般来说,post请求用于在表单中数据提交后的过程。因为post方式可以比get方式发送更多的数据,大约2GB,因为post方式发送的数据不是添加在URL中的。
post请求的参数也和get一样,要进行编码,并用&符号分割名称/值。同时还有设置HTTP请求头部。
get和post方式对比
1、get是最常用的方式,get请求的参数数据会追加在请求URL中末尾,用查询语句的形式,即用?符合开始,后面跟着&符号链接起来的名称/值。如:http://www.somewhere.com/page.php?name1=value1&name2=value2&name3=value3注意:
所有的名称和值都要经过编码后才能添加到URL中,使用encodeURIComponent()进行编码。
由于URL最长为2048字节即2KB,所以get方式不适合发送大量数据。
2、post是第二常见的方式,一般来说,post请求用于在表单中数据提交后的过程。因为post方式可以比get方式发送更多的数据,大约2GB,因为post方式发送的数据不是添加在URL中的。
post请求的参数也和get一样,要进行编码,并用&符号分割名称/值。同时还有设置HTTP请求头部。
Get方式 | Post方式 |
function doRequestUsingGET(){ //1、创建XMLHttpRequest对象 if(window.ActiveXObject){ //IE5、IE6浏览器 var xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); }else if(window.XMLHttpRequest){ //其他浏览器 var xmlHttp = new XMLHttpRequest(); } //2、设置回调函数 xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4 && xmlHttp.status==200){ var responseDiv = document.getElementById(serverResponse); responseDiv.innerHTML = decodeURI(xmlHttp.responseText); } } //3、创建连接 var queryString = “name1=value1&name2=value2”; var url = “test.php” var data = url+”?”+queryString; xmlHttp.open("GET",data); //4、发送数据 xmlHttp.send(null); } | function doRequestUsingPOST(){ //1、创建XMLHttpRequest对象 if(window.ActiveXObject){ //IE5、IE6浏览器 var xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); }else if(window.XMLHttpRequest){ //其他浏览器 var xmlHttp = new XMLHttpRequest(); } //2、设置回调函数 xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4 && xmlHttp.status==200){ var responseDiv = document.getElementById(serverResponse); responseDiv.innerHTML = decodeURI(xmlHttp.responseText); } } //3、创建连接 var queryString = “name1=value1&name2=value2”; var url = “test.php” xmlHttp.open("POST",url); //4、设置HTTP请求头部 xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”) //5、发送数据 xmlHttp.send(queryString); } |
相关文章推荐
- web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例
- JS与Ajax Get和Post在使用上的区别实例详解
- ajax(一) 文本格式操作 get和post 实例
- 原生 JS Ajax,GET和POST 请求实例代码
- AJAX中的POST与GET方式实例
- 原生 JS Ajax,GET和POST 请求实例代码
- JS 最简单的AJAX实例, GET 和 POST 方法
- 原生JS实现Ajax通过GET方式与PHP进行交互操作示例
- javascript/js的ajax请求方式:GET与POST
- Ajax中的get和post两种请求方式的用法
- ajax打开请求的两种方式(get,post)
- Ajax中的get和post两种请求方式的异同(转)
- ajax与php交互的get和post两种实现方式
- 用Ajax以GET或POST的方式来和服务器进行数据交互
- AJAX中GET和POST方式乱码解决方案
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
- jquery+ajax 的 data参数设置的内容,如何在HttpHandler的HttpContext中取得(包括post方式和get方式)
- javascript之post网站用get方式采集实例
- Ajax中的get和post两种请求方式的异同
- AJAX+JSP GET与POST方式参数传递的应用