jax指的是异步JavaScript和XML,是一套综合了多项技术的浏览器端网页开发技术。也是目前网页前端设计较为流行使用的技术。Ajax能够真正实现网页前端与业务后台的分离,体现出网页设计大前端的设计思想。所有的前端设计只需要通过Ajax将消息传递给业务逻辑,运算完直接发送前端。其实现原理如下:
工作原理及过程
一般情况下,在处理具体业务是网页通常采用发送HTTP请求中带有参数形式传递命令与数据,处理页面接收到数据之后进行处理。这种情况需要页面跳转或者页面刷新,增加了服务器与客户端通信的开销。而使用Ajax技术进行业务处理时只需要通过Ajax与Json实现在不刷新页面前提下完成业务功能,在满足前后端分离的基础上进一步降低网络通信量。本文针对初学者以实例形式对Ajax应用进行说明,希望对初学者有所帮助。
案例描述:前端为用户信息查询页面login.html,提供文本框用于接收用户姓名,业务逻辑处理页面为query.php,模拟接收用户姓名,执行查询,返回用户基本信息,前端login.html通过Ajax回调函数读取信息并以table形式进行输出显示。其前端页面设计如下:
前端测试页面
(1) XMLHttpRequest对象
XMLHttpRequest是 AJAX 的基础。用于向服务器发送request请求实现数据交换。由于是对象XMLHttpRequest在使用的时候需要用new进行对象的实例化。如:var xmlhttp = new XMLHttpRequest();
(2) 发送请求open()与send()
通过使用open与send方法将客户端Ajax请求发送到服务器端,其中open请求带有请求类型等参数,send可以带传递的参数值。两函数基本语法如下:
open(method,url,async)//方法、处理URL,异步/同步 send(string)//post类型时传递参数
(3) onreadystatechange 事件
通过使用该事件用于响应服务器端状态的改变,readyState与status,其中readyState=4表示服务器请求已完成,响应已就绪。status=200表示已就绪。因此可以在该事件响应函数中去接收服务端传递数据。
(4) 服务器返回值类型responseText与responseXML,其中responseText表示接收服务器发送过来的字符串。
(1)获取表单用户名值 var uname=document.getElementById('name').value;
(2)发送Ajax POST请求
Ajax Post请求
(3)(服务器请求处理)业务逻辑处理
php处理业务逻辑
(4)前端获取服务器值并输出显示表格
前端显示服务器发送数据(在不刷新页面情况下)
以上给出使用JavaScript原生态Ajax进行服务器与客户端浏览器进行数据交互的简单例题,重点为XMLHttpRequest对象的使用,业务逻辑处理使用了PHP。整体实现效果GIF动图描述如下:
Ajax实现效果
本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可以联系作者,共同探讨。期待大家关注!如需案例完整代码请关注并私信,往期前端设计文章链接如下:
jax提交含有html数据时的处理方法,当请求参数中含有html便签内容,系统无法进行提交,可以在前台加密,后台解密即可。具体操作如下:
function ajax_encode(str)
{
str = str.replace(/%/g,"{@bai@}");
str = str.replace(/ /g,"{@kong@}");
str = str.replace(/</g,"{@zuojian@}");
str = str.replace(/>/g,"{@youjian@}");
str = str.replace(/&/g,"{@and@}");
str = str.replace(/\"/g,"{@shuang@}");
str = str.replace(/\'/g,"{@dan@}");
str = str.replace(/\t/g,"{@tab@}");
str = str.replace(/\+/g,"{@jia@}");
return str;
}12345678910111213复制代码类型:[html]
public static String ajax_decode(String str, Boolean bsql)
{
str = str.replace("{@bai@}", "%");
str = str.replace("{@dan@}", "'");
str = str.replace("{@shuang@}", "\"");
str = str.replace("{@kong@}", " ");
str = str.replace("{@zuojian@}", "<");
str = str.replace("{@youjian@}", ">");
str = str.replace("{@and@}", "&");
str = str.replace("{@tab@}", "\t");
str = str.replace("{@jia@}", "+");
if(bsql) str = str.replace("'", "''");
return str;
}1234567891011121314复制代码类型:[html]
这样请求可以正常发送!
「链接」
JAX上传的用户体验更好,HTML上传用户使用更方便一点,直接在网页里面就能够操作了。示例在下面提供了,是完整的源代码,有教程,有视频教程,基本上使用非常简单,开发也非常简单,有技术支持,
网上搜了一下,基本上讲这块的文章还是很多,但是就是一个字乱,讲的很混乱。也没有提供完整的前后端示例。
用户上传的文件比较大,有20G左右,直接用HTML传的话容易失败,服务器也容易出错,需要分片,分块,分割上传。也就是将一个大的文件分成若干个小文件块来上传,另外就是需要实现秒传功能和防重复功能,秒传就是用户如果上传过这个文件,那么直接在数据库中查找记录就行了,不用再上传一次,节省时间,实现的思路是对文件做MD5计算,将MD5值保存到数据库,算法可以用MD5,或者CRC,或者SHA1,这个随便哪个算法都行。
分片还需要支持断点续传,现在HTML5虽然提供了信息记录功能,但是只支持到了会话级,也就是用户不能关闭浏览器,也不能清空缓存。但是有的政府单位上传大文件,传了一半下班了,明天继续传,电脑一关结果进度信息就丢失了,这个是他们的一个痛点。
切片的话还有一点就是在服务器上合并,一个文件的所有分片数据上传完后需要在服务器端进行合并操作。
1.下载示例
https://gitee.com/xproer/up6-vue-cli
将up6组件复制到项目中
示例中已经包含此目录
1.引入up6组件
2.配置接口地址
接口地址分别对应:文件初始化,文件数据上传,文件进度,文件上传完毕,文件删除,文件夹初始化,文件夹删除,文件列表
参考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.处理事件
启动测试
启动成功
效果
数据库
*请认真填写需求信息,我们会在24小时内与您取得联系。