XMLHttpRequest详情之GET和POST(二)
2012-03-12 21:50
330 查看
效果如图:
代码和(一)差不多,先上first.html代码
GET格式:
假如在xmlrequest.send()中换成send(“id=”+id)则有异常,只能将参数加到url后面
而POST方式:
var uri = "second.jsp";
//设置以POST方法发送请求,并打开连接
xmlrequest.open("POST", uri, true);
//设置POST请求的请求头
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
//确定XMLHttpRequest对象的状态改变时的回调函数
xmlrequest.onreadystatechange = processResponse;
//发送请求,在发送请求时发送请求参数
xmlrequest.send("id="+id);
可以看到post方式与GET方式的不同,必须有请求头,而请求参数既可以跟get一样在url后,也可以像上面一样在send()函数里
代码和(一)差不多,先上first.html代码
<body> <select name="first" id="first" size="3" onchange="change(this.value);"> <option value="1" selected="selected">中国</option> <option value="2">美国</option> <option value="3">日本</option> </select> <select id="second" size="3"></select> <script type="text/javascript"> //定义了XMLHttpRequest对象 var xmlrequest; //完成XMLHttpRequest对象的初始化 function createXMLHttpRequest() { if(window.XMLHttpRequest) { //DOM 2浏览器 xmlrequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { xmlrequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlrequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } } //事件处理函数,当下拉列表选择改变时,触发该函数 function change(id) { //初始化XMLHttpRequest对象 createXMLHttpRequest(); //设置请求响应的URL var uri = "second.jsp?id="+id; //打开与服务器资源的连接 xmlrequest.open("GET", uri, true); //设置处理响应的回调函数 xmlrequest.onreadystatechange = processResponse; //发送请求 xmlrequest.send(null); } //定义处理响应的回调函数 function processResponse() { //响应完成且响应正常 if (xmlrequest.readyState == 4) { if (xmlrequest.status == 200) { //将服务器相应以$符号分隔成字符串数组 var cityList = xmlrequest.responseText.split("$"); //获取用于显示菜单的下拉列表 var displaySelect = document.getElementById("second"); //将目标下拉列表清空 displaySelect.innerHTML = null; //以字符串数组的每个元素创建option,并将这些选项添加到下拉列表中 for (var i = 0 ; i < cityList.length ; i++) { //创建一个<option.../>元素 var op = document.createElement("option"); op.innerHTML = cityList[i]; //将新的选项添加到列表框的最后 displaySelect.appendChild(op); } } else { //页面不正常 window.alert("您所请求的页面有异常。"); } } } </script> </body>
GET格式:
var uri = "second.jsp?id="+id; //打开与服务器资源的连接 xmlrequest.open("GET", uri, true); //设置处理响应的回调函数 xmlrequest.onreadystatechange = processResponse; //发送请求 xmlrequest.send(null);注意到GET方式如果要发送请求参数,应将请求参数转化成查询字符串,并追加到请求的URL之后
假如在xmlrequest.send()中换成send(“id=”+id)则有异常,只能将参数加到url后面
而POST方式:
var uri = "second.jsp";
//设置以POST方法发送请求,并打开连接
xmlrequest.open("POST", uri, true);
//设置POST请求的请求头
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
//确定XMLHttpRequest对象的状态改变时的回调函数
xmlrequest.onreadystatechange = processResponse;
//发送请求,在发送请求时发送请求参数
xmlrequest.send("id="+id);
可以看到post方式与GET方式的不同,必须有请求头,而请求参数既可以跟get一样在url后,也可以像上面一样在send()函数里
相关文章推荐
- 使用JavaScript的XMLHttpRequest发送POST、GET请求以及接收返回值
- XMLHttpRequest.open();第一个参数post,get有什么不同,什么时候选什么,还有其他的,都有什么区别?
- ajax中XMLHttpRequest对象的open()方法GET和POST方式区别
- 最基础的ajax----xmlHttpRequest(get\\post)
- js中XMLHttpRequest对象实现GET、POST异步传输
- XMLHttpRequest中的GET和Post
- 1.Ajax基础——XMLHttpRequest、Get/Post、封装Ajax
- ajax XMLHttpRequest post get
- ajax XMLHttpRequest post get
- 黑马程序员---XMLHttpRequest 对象open参数中使用post与get区别
- 使用JavaScript的XMLHttpRequest发送POST、GET请求以及接收返回值
- How To Do A JavaScript Cross-Domain POST or GET With jQuery or XMLHttpRequest
- 关于XMLHttpRequest.open()设置提交方式 (POST,GET)
- XMLHttpRequest()的post和get方法
- jQuery的ajax()检验用户名;通过jQuery的load()/get()/post()方法实现;使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- 关于XMLHttpRequest.open()设置提交方式 (POST,GET)
- 从项目学习(一)之 XmlHttpRequest的Get,Post方法
- XMLHttpRequest发送POST、GET请求以及接收返回值
- XMLHttpRequest的亲密接触(2.3)——post&get提交的捕获请求方法
- 原始ajax通过xmlHttpRequest对象的send()方法提交数据--Get方式和Post方式