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

时间2024-01-26 17:27:03发布访客分类HTML浏览775

导读：收集整理的这篇文章主要介绍了html5教程-HTML5第7次课堂笔记（图片验证码的应用,xmlhttprequest对象的使用,跨域），觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大...

收集整理的这篇文章主要介绍了html5教程-HTML5第7次课堂笔记（图片验证码的应用,xmlhttprequest对象的使用,跨域），觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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严禁是跨域

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