码迷,mamicode.com
首页 > Web开发 > 详细

HTML5第7次课堂笔记(图片验证码的应用,xmlhttprequest对象的使用,跨域)

时间:2016-04-22 20:44:03      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

HTML5第7次课堂笔记

1.  图片验证码的应用:(1)服务端Content-type的控制;(2)客户端防止缓存(仅对GET)

 

服务器端使用的是jsp

技术分享

技术分享

技术分享

 

点击图片,实现刷新验证码

有时拿不到服务器的数据  没有请求出去  浏览器的问题,请求缓存起来

对同一个地址不断请求,会缓存起来,一定是get请求

 技术分享

 技术分享

可以看到每次请求地址都不一样,这样就避免了缓存

 

 技术分享

 

总结:通过fiddler查看http的请求和响应可以看出很多有用的信息,对排查错误,查看数据很有帮助

 

 

2.  xmlhttprequest对象的使用

 

步骤:

 技术分享

方式一:get方式,不传递数据

  <script>

            //创建ajax对象

           varxml=new XMLHttpRequest();

           //创建请求

           xml.open("GET","index.jsp",true);

           xml.onreadystatechange=function()

           {

              if(xml.readyState==4)//响应回来,并不代表一定成功

              {

                  if(xml.status==200)//请求成功

                  {

                     alert(xml.responseText);//返回响应正文

                  }

              }

             

           }

           xml.send(null);

       </script>


结果:返回index.jsp的内容

 技术分享

 

方式二:get方式,通过url传递数据

<script>

           var xml=new XMLHttpRequest();

           //创建请求

           xml.open("GET","DataTest1?sdsdsd=1111",true);

           xml.onreadystatechange=function()

           {

              if(xml.readyState==4)//响应回来,并不代表一定成功

              {

                  if(xml.status==200)//请求成功

                  {

                     alert(xml.responseText);//返回响应正文

                  }

              }

             

           }

           xml.send(null);

       </script>

技术分享

从fiddler抓包中可以看出发送的数据

 技术分享

 

 

方式三:post方式,通过send()传递数据


  <script>

           var xml=new XMLHttpRequest();

           //创建请求

           xml.open("POST","DataTest1",true);

           xml.onreadystatechange=function()

           {

              if(xml.readyState==4)//响应回来,并不代表一定成功

              {

                  if(xml.status==200)//请求成功

                  {

                     alert(xml.responseText);//返回响应正文

                  }

              }

             

           }

           xml.send("sdsdsd=1111");

       </script>

 技术分享

技术分享

 


 

3.  补充:跨域问题

跨域:就是前面的域名不一样 端口号不一样也算

JavaScript严禁是跨域

跨域之间不同传送,接受数据

HTML5第7次课堂笔记(图片验证码的应用,xmlhttprequest对象的使用,跨域)

标签:

原文地址:http://blog.csdn.net/u013267266/article/details/51203494

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!