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

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

HTML5第7次课堂笔记

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

服务器端使用的是jsp

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

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

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

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

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

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

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

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

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

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

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

2.xmlhttprequest对象的使用

步骤:

html5教程-HTML5第7次课堂笔记(图片验证码的应用,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的内容

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

方式二: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>

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

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

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

方式三: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>

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

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

3.补充:跨域问题

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

JavaScript严禁是跨域

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

HTML5第7次课堂笔记

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

服务器端使用的是jsp

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

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

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

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

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

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

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

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

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

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

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

2.xmlhttprequest对象的使用

步骤:

html5教程-HTML5第7次课堂笔记(图片验证码的应用,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的内容

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

方式二: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>

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

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

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

方式三: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>

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

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

3.补充:跨域问题

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

JavaScript严禁是跨域

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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5第7次课堂笔记(图片验证码的应用,xmlhttprequest对象的使用,跨域)全部内容,希望文章能够帮你解决html5教程-HTML5第7次课堂笔记(图片验证码的应用,xmlhttprequest对象的使用,跨域)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:HTML