博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax 随笔
阅读量:6322 次
发布时间:2019-06-22

本文共 1357 字,大约阅读时间需要 4 分钟。

例子:实现AJAX效果(投票例子)

后端代码

631180-20160622223738625-712549586.png

前端代码

631180-20160622223748422-1187340559.png

原理是使用HTTP状态码204的特性(请求成功,但是不会返回内容,所以浏览器不会进行跳转)

例子:实现AJAX效果(投票例子2)

前端代码

631180-20160622223852844-971459397.png

原理是利用img,script等标签加载内容的特性

例子:实现AJAX效果(注册例子)

前端代码

631180-20160622223951422-1459563608.png

后端代码

631180-20160622224005063-1570445969.png

原理是利用iframe特性,将表单的target指向iframe后,服务器打印出来的内容会输出在iframe中

AJAX(XMLHttpRequest对象)

例子:发送GET请求

631180-20160622224647844-763139662.png

通过XMLHttpRequest对象还可以获取到响应信息里的内容

631180-20160622224752875-1864297192.png

例子:发送POST请求

631180-20160622224922125-2136557018.png

AJAX返回值类型

在AJAX1.0版本中AJAX的返回类型只有text和xml这两种类型

服务端返回xml数据处理

(1) 服务器响应的xml数据

631180-20160622225433047-1104861922.png

(2)对xml数据进行处理

631180-20160622225301578-1869882224.png

(3)处理后的xml数据

631180-20160622225513328-1750056624.png

服务端返回json数据处理

(1) 服务器响应的json数据

631180-20160622225827922-1024676782.png

(2) 对json数据进行处理

631180-20160622230046953-810572100.png

(3) 处理后的json数据

631180-20160622230124813-1694572638.png

跨域问题

什么是跨域,跨域就是浏览器为了安全而不让不同域名之间可以进行消息通信,例如:<a><script><link><img>标签就能进行跨域,从其他域名网站中获取到数据。有时候我们异步到其他网站进行数据通信,这时候我们就能使用jsonp来解决,jsonp并不是什么特殊的技术,而是通过<script>能够跨域的特性,发送数据到服务器,服务器处理完数据后,返回一段JavaScript代码,通过这段代码调用本地写好的回调函数。

例子:jsonp

后端代码

631180-20160622230451094-1255492332.png

前端代码

631180-20160622230550547-1726573597.png

HTML5与AJAX

一般情况下有三种异步文件上传方式

(1)使用iframe上传文件
(2)使用flash上传文件
(3)使用HTML5的新API上传文件

例子:使用iframe上传文件

使用iframe上传文件大致分为以下几个步骤

(1)监听表单提交事件
(2)当表单提交时创建一个iframe,然后将表单的target指向iframe
(3)服务器上传成功后返回一段JavaScript代码,用于操作父页面的内容
前端代码
631180-20160622231115000-1435015519.png

后端代码

631180-20160622231206469-1567086897.png

例子:使用HTML5的FromData

前端代码

631180-20160622232133906-1637165117.png

提交到后端的数据

631180-20160622232248610-2096011246.png

例子:使用HTML5实现文件上传

前端代码

631180-20160622232916281-1714007783.png

后端代码

631180-20160622233148875-1326708373.png

上传后打印出来的信息

631180-20160622233248656-1022087620.png

上传前

631180-20160622233326203-1075037842.png

上传后

631180-20160622233357625-1222888598.png

例子:利用xhr2新特性实现跨域

在HTML5中,AJAX的跨域有了新的规则,能否实现跨域取决于服务器的应答,服务器可以在响应的头信息中加上Access-Control-Allow-Origin这个header,它的值既可以是域名也可以是表示任意的域名)

例子:利用xhr2新特性实现大文件切割上传

后端代码

631180-20160622233735219-133175098.png

前端代码

631180-20160622233939735-345175696.png
631180-20160622233914656-672377664.png

例子:长连接技术

长连接技术主要是利用HTTP协议的特性,通过不给content-length指定长度,让HTTP连接一直不断开,实现单向长连接,使得服务器可以向浏览器一直推送消息,所以长连接技术也叫做服务器推技术。由于建立长连接会造成阻塞,所以长连接一般会配合iframe来使用。

后端代码

631180-20160622234325813-556437618.png

浏览器中显示的效果

631180-20160622234413969-1249924589.png
631180-20160622234448141-2136456878.png

转载于:https://www.cnblogs.com/helbing/p/5608792.html

你可能感兴趣的文章
BZOJ2790 : [Poi2012]Distance
查看>>
jenkins 安装 SVN Publisher 后向 svn 提交代码报错: E170001: Authentication required for...
查看>>
伪异步IO理解
查看>>
成为JAVA GC专家系列
查看>>
我的编程之路(十八) 团队开发
查看>>
Redis的消息通知
查看>>
Cocos2d-x中触摸事件
查看>>
Word2010插入页码分节符
查看>>
mysql benchmark基准测试
查看>>
JS获取中文拼音首字母,并通过拼音首字母高速查找页面内的中文内容
查看>>
Android studio多个项目之间怎么实现快速切换?
查看>>
WIN7 以下创建cocos2d-x3.0+lua项目
查看>>
如何安装Git到MAC OS X
查看>>
一次性将多个文件夹批处理压缩成多个.rar
查看>>
django之创建第7-2个项目-url配置分离
查看>>
SourceTree - 正在检查源... When cloning a repository, "Checking Source" spins forever
查看>>
基于android studio的快捷开发(将持续更新)
查看>>
json序列化时datetime的处理方法
查看>>
Mesos源码分析(1): Mesos的启动过程总论
查看>>
iOS开发UI篇—常见的项目文件介绍
查看>>