XMLHttpRequest[GET和Post]详解

合集下载

Http请求方法之Get、Post原理

Http请求方法之Get、Post原理

Http请求⽅法之Get、Post原理什么是HTTP? HTTP,即超⽂本传输协议,是⼀种实现客户端和服务器之间通信的响应协议,它是⽤作客户端和服务器之间的请求。

客户端(浏览器)会向服务器提交HTTP请求;然后服务器向客户端返回响应;其中响应包含有关请求的状态信息,还可能包含请求的内容。

HTTP的常⽤⽅法 1、GET⽅法 GET⽅法⽤于使⽤给定的URI从给定服务器中检索信息,即从指定资源中请求数据。

使⽤GET⽅法的请求应该只是检索数据,并且不应对数据产⽣其他影响。

在GET请求的URL中发送查询字符串(名称/值对),需要这样写:/test/demo_form.php?name1=value1&name2=value2 说明:GET请求是可以缓存的,我们可以从浏览器历史记录中查找到GET请求,还可以把它收藏到书签中;且GET请求有长度限制,仅⽤于请求数据(不修改)。

注:因GET请求的不安全性,在处理敏感数据时,绝不可以使⽤GET请求。

2、POST⽅法 POST⽅法⽤于将数据发送到服务器以创建或更新资源,它要求服务器确认请求中包含的内容作为由URI区分的Web资源的另⼀个下属。

POST请求永远不会被缓存,且对数据长度没有限制;我们⽆法从浏览器历史记录中查找到POST请求。

3、HEAD⽅法 HEAD⽅法与GET⽅法相同,但没有响应体,仅传输状态⾏和标题部分。

这对于恢复相应头部编写的元数据⾮常有⽤,⽽⽆需传输整个内容。

4、PUT⽅法 PUT⽅法⽤于将数据发送到服务器以创建或更新资源,它可以⽤上传的内容替换⽬标资源中的所有当前内容。

它会将包含的元素放在所提供的URI下,如果URI指⽰的是当前资源,则会被改变。

如果URI未指⽰当前资源,则服务器可以使⽤该URI 创建资源。

5、DELETE⽅法 DELETE⽅法⽤来删除指定的资源,它会删除URI给出的⽬标资源的所有当前内容。

6、CONNECT⽅法 CONNECT⽅法⽤来建⽴到给定URI标识的服务器的隧道;它通过简单的TCP / IP隧道更改请求连接,通常实使⽤解码的HTTP代理来进⾏SSL编码的通信(HTTPS)。

JSのXMLHTTPRequest的属性和方法简介

JSのXMLHTTPRequest的属性和方法简介

JSのXMLHTTPRequest的属性和方法简介2011-05-13 23:54:50| 分类:JSの小技巧| 标签:xmlhttp 属性 http 返回备注|字号大中小订阅当然...这也是转的...怕链接失效。

所以偶会复制过来...转自:[个人收集整理]XMLHTTPRequest的属性和方法简介(好东西哦)由于现在在公司负责制作标准的静态页面,为了增强客户体验,所以经常要做些AJAX效果,也学你也和我一样在,学习AJAX。

而设计AJAX时使用的一个重要的技术(工具)就是XMLHTTPRequest对象了。

这里海啸把我学习XMLHTTPRequest 对象的一点资料拿出来跟大家一起分享。

文中的资料都是海啸在学习时在网上收集的,如果您开过,那就再加深下印象吧!(如果您觉得侵犯了您的版权,请联系海啸。

(haixiao_yao@))1、XMLHTTPRequest对象什么是?最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。

XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

(这个功能正是AJAX的一大特点之一:))来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议。

客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。

这里说些题外话,其实这个东西很早就出现了,只是以前浏览器的支持不够,只有IE中才支持,所以大多数的WEB程序员都没有怎么用他,但是现在情况发生了很大地改变,Mozilla和Safari 把它采用为事实上的标准,主流的浏览器都开始支持XMLHTTPRequest对象了。

但是这里需要重点说明的是XMLHTTPRequest目前还不是一个W3C的标准,所以在不同的浏览器上表现也稍有些区别。

js发送get、post请求的方法简介

js发送get、post请求的方法简介

js发送get、post请求的⽅法简介POST请求: 发送的参数格式不同,请求头设置不同,具体参照 发送的参数格式不同,后台获取⽅式也不相同 php请看⼀、使⽤XMLHttpRequest 主要分三步: 第⼀步:创建需要的对象,这⾥主要⽤到的是XMLHttpRequest,注意需要考虑早期的IE; 第⼆步:连接和发送; 第三步:接收; GET请求:var httpRequest = new XMLHttpRequest();//第⼀步:建⽴所需的对象httpRequest.open('GET', 'url', true);//第⼆步:打开连接将请求参数写在url中 ps:"./Ptest.php?name=test&nameone=testone"httpRequest.send();//第三步:发送请求将请求参数写在URL中/*** 获取数据后的处理程序*/httpRequest.onreadystatechange = function () {if (httpRequest.readyState == 4 && httpRequest.status == 200) {var json = httpRequest.responseText;//获取到json字符串,还需解析console.log(json);}}; POST请求:var httpRequest = new XMLHttpRequest();//第⼀步:创建需要的对象httpRequest.open('POST', 'url', true); //第⼆步:打开连接httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头注:post⽅式必须设置请求头(在建⽴连接后设置请求头)httpRequest.send('name=teswe&ee=ef');//发送请求将情头体写在send中/*** 获取数据后的处理程序*/httpRequest.onreadystatechange = function () {//请求后的回调接⼝,可将请求成功后要执⾏的程序写在其中if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功var json = httpRequest.responseText;//获取到服务端返回的数据console.log(json);}}; post⽅式发送jsonvar httpRequest = new XMLHttpRequest();//第⼀步:创建需要的对象httpRequest.open('POST', 'url', true); //第⼆步:打开连接/***发送json格式⽂件必须设置请求头;如下 -*/httpRequest.setRequestHeader("Content-type","application/json");//设置请求头注:post⽅式必须设置请求头(在建⽴连接后设置请求头)var obj = { name: 'zhansgan', age: 18 };httpRequest.send(JSON.stringify(obj));//发送请求将json写⼊send中/*** 获取数据后的处理程序*/httpRequest.onreadystatechange = function () {//请求后的回调接⼝,可将请求成功后要执⾏的程序写在其中if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功var json = httpRequest.responseText;//获取到服务端返回的数据console.log(json);}}; ⼆、 。

XMLHttpRequest发送POST、GET请求以及接收返回值

XMLHttpRequest发送POST、GET请求以及接收返回值

XMLHttpRequest发送POST、GET请求以及接收返回值使⽤XMLHttpRequest对象分为4部完成:1.创建XMLHttpRequest组建2.设置回调函数3.初始化XMLHttpRequest组建4.发送请求实例代码:[javascript]var userName;var passWord;var xmlHttpRequest;//XmlHttpRequest对象function createXmlHttpRequest(){if(window.ActiveXObject){ //如果是IEreturn new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){ //⾮IE浏览器return new XMLHttpRequest();}}function onLogin(){userName = ername.value;passWord = document.f1.password.value;var url = "LoginServlet?username="+userName+"&password="+passWord+"";//1.创建XMLHttpRequest组建xmlHttpRequest = createXmlHttpRequest();//2.设置回调函数xmlHttpRequest.onreadystatechange = zswFun;//3.初始化XMLHttpRequest组建xmlHttpRequest.open("POST",url,true);//4.发送请求xmlHttpRequest.send(null);}//回调函数function zswFun(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){var b = xmlHttpRequest.responseText;if(b == "true"){alert("登录成功!");}else{alert("登录失败!");}}}================================================================================[javascript]var xmlhttp;function verify1() {var username = document.getElementById("username").value;//确定浏览器if(window.XMLHttpRequest) {//针对FireFox、Mozillar、Opera、Safari、IE7、IE8//创建XMLHttpRequest对象xmlhttp = new XMLHttpRequest();//修正某些浏览器的BUGif(xmlhttp.overrideMimeType) {xmlhttp.overrideMimeType("text/");}}else if(window.ActiveXObject){//针对IE5、IE5.5、IE6//这两个为插件名称作为参数传递,为了创建ActiveXObjectvar activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];for(var i=0;i>activeName.length();i++) {try{//⾮别取出,如果创建成功则终⽌循环,如果失败则会抛出异常继续循环xmlhttp = new ActiveXObject(activeName[i]);break;}catch(e){}}}//确定XMLHttpRequest是否创建成功/*if(!xmlhttp) {alert("XMLHttpRequest创建失败!");return;}else {alert("XMLHttpRequest创建成功!"+xmlhttp);}*///注册回调函数xmlhttp.onreadystatechange=callback;url = "classisservlet?name="+username;//设置连接信息//1.是http请求的⽅式//2.是服务器的地址//3.是采⽤同步还是异步,true为异步//xmlhttp.open("GET",url,true);//post请求与get请求的区别//第⼀个参数设置成post第⼆个只写url地址,第三个不变xmlhttp.open("POST","classisservlet",true);//post请求要⾃⼰设置请求头xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送数据,开始与服务器进⾏交互//post发送请求xmlhttp.send("name="+username);}function callback() {//接收响应数据 //判断对象状态是否交互完成,如果为4则交互完成if(xmlhttp.readyState == 4) {//判断对象状态是否交互成功,如果成功则为200if(xmlhttp.status == 200) {//接收数据,得到服务器输出的纯⽂本数据var response = xmlhttp.responseText;//得到div的节点将数据显⽰在div上var divresult = document.getElementById("result");divresult.innerHTML = response;}}}[javascript]<span style="color:#ffffff;"></span>[plain]。

Ajax中的XMLHttpRequest对象详解

Ajax中的XMLHttpRequest对象详解

Ajax中的XMLHttpRequest对象详解XMLHttpRequest对象是Ajax技术的核⼼。

在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引⼊,被称之为XMLHTTP,它是⼀种⽀持异步请求的技术。

后来Mozilla、Netscape、Safari、Firefox和其他浏览器也提供了XMLHttpRequest类,虽然这些浏览器都提供了XMLHttpRequest类,但它们创建XMLHttpRequest类的⽅法并不相同。

XMLHttpRequest使我们可以使⽤JavaScript向服务器提出请求并处理响应,⽽不阻塞⽤户的其他操作。

不刷新页⾯就和服务器进⾏交互是Ajax最⼤的特点。

这个重要的特点主要归功于XMLHttpRequest对象。

使⽤XMLHttpRequest对象使得⽹页应⽤程序像windows应⽤程序⼀样,能够及时响应⽤户与服务器之间的交互,不必进⾏页⾯刷新或者跳转,并且能够进⾏⼀系列的数据处理,这些功能可以使⽤户的等待时间缩短,同时也减轻了服务器端的负载。

⽬前XMLHttpRequest对象已经得到了⼤部分浏览器的⽀持,因此使⽤Ajax技术开发Web应⽤程序的时候⼀般情况下不会出现问题。

不过,当开发⼈员确定使⽤Ajax技术来开发时,仍然需要考虑⽤户会使⽤什么样的浏览器来对⽹站进⾏访问,虽然不⽀持XMLHttpRequest对象的浏览器占少数。

在使⽤XMLHttpRequest对象向服务器发送请求和处理响应之前,必修先⽤JavaScript创建⼀个XMLHttpRequest对象,然后通过这个对象来和服务器建⽴请求并接收服务器返回的数据。

由于XMLHttpRequest不是⼀个W3C标准,所以可以采⽤多种⽅法使⽤JavaScript来创建XMLHttpRequest的实例。

Internet Explorer把XMLHttpRequest实现为⼀个ActiveX对象,其他浏览器(如Firefox、Safari和Opera等)把它实现为⼀个本地JavaScript对象。

HTTP请求(GET与POST区别)和响应(get是从服务器上获取数据,post是向服务器。。。

HTTP请求(GET与POST区别)和响应(get是从服务器上获取数据,post是向服务器。。。

HTTP请求(GET与POST区别)和响应(get是从服务器上获取数据,post是向服务器。

HTTP有两部分组成:请求与响应,下⾯分别整理。

⼀.HTTP请求1.HTTP请求格式:<request line><headers><blank line>[<request-body>]在HTTP请求中,第⼀⾏必须是⼀个请求⾏(request line),⽤来说明请求类型、要访问的资源以及使⽤的HTTP版本。

紧接着是⼀个⾸部(header)⼩节,⽤来说明服务器要使⽤的附加信息。

在⾸部之后是⼀个空⾏,再此之后可以添加任意的其他数据[称之为主体(body)]。

2.GET与POST区别HTTP 定义了与服务器交互的不同⽅法,最基本的⽅法是 GET 和 POST(Ajax开发,关⼼的只有GET请求和POST请求)。

GET与POST⽅法有以下区别:(1)在客户端,Get⽅式在通过URL提交数据,数据在URL中可以看到;POST⽅式,数据放置在HTML HEADER内提交。

(2) GET⽅式提交的数据最多只能有1024字节,⽽POST则没有此限制。

(3)安全性问题。

正如在(1)中提到,使⽤ Get 的时候,参数会显⽰在地址栏上,⽽ Post 不会。

所以,如果这些数据是中⽂数据⽽且是⾮敏感数据,那么使⽤ get;如果⽤户输⼊的数据不是中⽂字符⽽且包含敏感数据,那么还是使⽤ post为好。

(4)安全的和幂等的。

所谓安全的意味着该操作⽤于获取信息⽽⾮修改信息。

幂等的意味着对同⼀ URL 的多个请求应该返回同样的结果。

完整的定义并不像看起来那样严格。

换句话说,GET 请求⼀般不应产⽣副作⽤。

从根本上讲,其⽬标是当⽤户打开⼀个链接时,她可以确信从⾃⾝的⾓度来看没有改变资源。

⽐如,新闻站点的头版不断更新。

虽然第⼆次请求会返回不同的⼀批新闻,该操作仍然被认为是安全的和幂等的,因为它总是返回当前的新闻。

AJAX(XMLHttpRequest)进行跨域请求方法详解

AJAX(XMLHttpRequest)进行跨域请求方法详解

发表于:2010-1-11浏览:965作者:转载遗失来源:网络转载关键字:AJAX,详解,请求描述:注意:以下代码请在Firefox3."5、Chrome3."0、Safari4之后的版本中进行测试。

IE8的实现方法与其他浏览不同。

跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。

这种情况很常见注意:以下代码请在Firefox3."5、Chrome3."0、Safari 4之后的版本中进行测试。

IE8的实现方法与其他浏览不同。

跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。

这种情况很常见,比如说通过style标签加载外部样式表文件、通过img标签加载外部图片、通过script标签加载外部脚本文件、通过Webfont 加载字体文件等等。

默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。

那么,什么是同源策略呢?如果两个页面的协议、域名和端口是完全相同的,那么它们就是同源的。

同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。

如果两个页面的主域名相同,则还可以通过设置document.domain属性将它们认为是同源的。

随着Web2."0和SNS的兴起,Web应用对跨域访问的需求也越来越多,但是,在脚本中进行跨域请求是受安全性限制的,Web开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合(Mashup)自己的Web应用。

这样做的一个好处就是可以将请求分摊到不同的服务器,减轻单个服务器压力以提高响应速度;另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。

值得庆幸的是,跨域请求的标准已经出台,主流浏览器也已经实现了这一标准。

W3C工作组中的WebApplicationsWorking Group(Web应用工作组)发布了一个Cross-Origin Resource Sharing(跨域资源共享,该规范地址:http:3."org/TR/access-control/和http://dev.w该规范只能应用在类似XMLHttprequest这样的API容器内。

XMLHttpRequest对象五步使用法

XMLHttpRequest对象五步使用法

在Ajax应用程序中,XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器返回的响应信息和数据。

XMLHttpRequest简介XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。

XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个DOM 文档形式返回内容。

尽管名为 XMLHttpRequest,它并不限于和XML 文档一起使用:它可以接收任何形式的文本文档。

XMLHttpRequest 对象是名为 AJAX 的Web 应用程序架构的一项关键功能。

XMLHttpRequest和JavascriptJavascript本身并未具备向服务器发送请求的能力,要么使用window.open()方法重新打开一个页面向服务器提交请求,要么使用XMLHttpRequest对象发送请求。

不同的是,前者是普通的即同步交互模式,而后者是异步交互方式。

XMLHttpRequest提供了一系列的属性和方法,来向服务器发送异步的http请求;在服务器处理用户请求的过程中,XMLHttpRequest通过属性的状态&#20540;来实时反映http请求所处的状态,并根据这些状态指示Javascript做相应的处理;当服务器顺利完成响应用户行为的动作、并将响应数据返回时,XMLHttpRequest提供的response系列方法,可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsignedbyte数组的方式组装起来,提供给Javascript处理。

XMLHttpRequest的五步使用法:1、建立XMLHttpRequest对象2、注册回调函数3、使用open方法社会自和服务器端交互的基本信息4、设置发送的数据,开始和服务器端交互5、在回调函数中判断交互是否结束,响应是否正确,并根据需要过去服务器端返回的数据,更新页面内容下面我们以用户名确认来实现XMLHttpRequest的五步使用法:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;&lt;script type=&quot;text/javascript&quot;&gt;var xmlhttp;function submit(){//1.创建XHLHttpRequest对象if(window.XMLHttpRequest){//alert(&quot;IE7,IE8 ,FireFox。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

【XMLHttpRequest】
Ajax-Post()
document.getElementById("Confirm").onclick = function()
{
//debugger;
//return ValiTitle() && ValiMatter();
//使用Ajax技术;
if (ValiTitle() && ValiMatter())
{
//验证之后禁用按钮;
this.disabled = true;
//创建XMLHttpRequest对象;
var xhr = new XMLHttpRequest();
//使用open("post","Append.aspx")方法,采用Post方法传值传递给Append.aspx页面;
xhr.open("post", "append.aspx");
//使用post发放传旨的时候在open()方法之后设置setRequsetHeader("Content-Type","application/x-www-form-urlencoded") xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//增加事件侦听onreadystatechange<-当读取状态发生变化的时候;
xhr.onreadystatechange = function()
{
//读取状态为4的时候
if (xhr.readyState == 4)
{
alert(xhr.responseText);
//提交数据之后form中数据清空,按钮可用;
document.getElementById("Myform").reset();
document.getElementById("Confirm").disabled = false;
}
}
//结束用send()相应setRequsetHeader的参数;
xhr.send("Title=" + encodeURIComponent(document.getElementById("Title").value) + "&Matter=" + encodeURIComponent(document.getElementById("Matter").value));
}
return false;
}
Ajax-Get()
document.getElementById("Confirm").onclick = function()
{
var XHR = new XMLHttpRequest();
XHR.open("get", "From.aspx?ID=" + document.getElementById("ID").value);//默认为true; 异步的意思
XHR.onreadystatechange = function()
{
if (XHR.readyState == 4)
{
if (XHR.status == 200)
{
//alert(XHR.responseText);
var str = XHR.responseText;
var arr = str.split(',');
//document.getElementById().innerHTML=arr[];
//调用函数;
dispost(responseText);
}
}
}
XHR.send(null);
return false;
}
【Ajax】 =参考【XMLHttpRequest手册】
JS URL传值
<script type="text/javascript">
documet.getElementById("Confirm").onclick=funtion()
{
var HeadImage=0;
var HIList=document.getElementByName("HeadImage");
var Len=HIList.length;
for(var i=0;i<Len;i++)
{
if(HIList[i].checked)
{
HeadImage=HIList[i].value;
}
}
var url="Lwdispose.aspx?title="...."
location.href=url;
}
</script>
传值:Response.Redirect("文件名");
var Xtr=new XMLhttpRequse();
//Xtr.open("get/post"(方法),Url(地址)+"&"+new Date(),true同步/false异步);
//Url(地址)+"&"+new Date() 解决客户端缓存的问题;
Xtr.open("get",Url,true);//异步执行
Xtr.onreadystatechange=function() //事件侦听
{
//alert(Xtr.readyState);
if(Xhr.readyState==4)
{
//alert(Xhr.responseText); 返回状态值
//alert(Xhr.status) 返回状态码
if(Xhr.status==200) 不是200表示出错了
{
switch(Xhr.responstext)
{
case"NickNameEmpty":
//document.getElementBYId("NickName").value="必须填写昵称"
document.getElementById("NickNameInfo").innerHTML="必须填写昵称"
break;
}
}
else
{
alert("出现错误!");
}
}
}
Xtr.open("get",Url,false) //同步执行不需要事件侦听。

相关文档
最新文档