整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端设计-Ajax技术及实例展示

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实现效果


本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可以联系作者,共同探讨。期待大家关注!如需案例完整代码请关注并私信,往期前端设计文章链接如下:

  1. 前端设计-响应式页面开发基础
  2. Web开发前端、后端与全栈的区别是什么?

jax提交含有html数据时的处理方法,当请求参数中含有html便签内容,系统无法进行提交,可以在前台加密,后台解密即可。具体操作如下:

前台(js)

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]

后台(java)

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.处理事件



启动测试



启动成功



效果



数据库