关于异步提交表单过程

先说一下web的交互过程,下面是一个BS架构过程,
关于异步提交表单过程
B代表的是浏览器,也就是前端,S代表的是服务器,也就是后端。
BS之间的交互过程是这样的:

  • 1.在浏览器的搜索框中输入内容,并点击搜索,浏览器向地址栏所指向的服务发送一个请求
  • 2.服务器收到请求,询问PHP引擎,用户需要的内容有哪些
  • 3.PHP开始执行写好的代码,并通过MySQL搜索数据库中的内容
  • 4.通过MySQL语句查询出数据库结果后,返还给PHP
  • 5.PHP代码接到查询结果,进行处理后返还给浏览器
  • 6.浏览器收到返回结果,并解析显示在页面上
    以上是浏览器访问服务器的整个过程。
    那么表单提交有传统方式和ajax异步提交。
    传统方式
    页面使用服务器控件的提交方式,在HTML表单中,用户点击了“提交”按钮,浏览器将请求发送给表单指定的地址,当服务端收到请求后,通过请求体中请求头【Content-Type】说明的编码方式就知道该如何读取请求的内容了。另:表单的数据是以name1=value1&name2=value2的形式提交的,其中name,value分别对应了表单控件的相应属性。
    这种方式是以“浏览器提交表单”。
    ajax方式
    ajax方式提交表单本质上是用JavaScript提交表单,他避免了F5的刷新重复提交问题,当您的页面一直使用服务器控件的提交方式,在事件处理后,页面又进入再一次的重现过程。以ajax方式提交表单的更大好处是他是异步的,可以实现局部刷新,这些特性都是浏览器提交方式没有的。
    关于异步提交表单过程

PHP中的代码是对用户输入的数据的输出,在HTML代码中加了一个名字为box的div盒子用来存放用户输入的数据,在下面的jQuery代码中也可以看到收到的PHP数据(response)显示在了box盒子中。