您现在的位置是:首页 > 学无止境 > Web网站首页Web 如何写AJAX让PHP与AJAX交互
如何写AJAX让PHP与AJAX交互
- Web
- 2019-05-11
简介AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发技术。字数
1494
1.传统Web应用的工作原理
传统Web应用允许用户填写表单,当提交表单时向Web服务器发送一个HTTP请求。服务器接收并处理传来的表单,然后返回一个新的网页到用户浏览器。如图所示的就是传统Web应用的工作原理:
使用传统Web应用时若要改变页面的一小部分数据,需要重新加载整个页面,这是一种不友好的用户体验。而且由于每次应用的交互都需要向服务器发送请求,应用的响应时间依赖于服务器的响应时间,这有可能导致用户花费较长的等待时间。
2.AJAX的工作原理
与传统Web应用不同的是,AJAX采用异步交互过程。AJAX可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的响应。用户在页面上获得的数据是通过AJAX引擎提供的,由于页面不需要与服务器直接交互,所以客户端浏览器不需要刷新页面就能获得服务器的信息,提高了页面的友好度。如图所示的就是AJAX引擎的工作原理:
下面我就讲解一个AJAX程序处理过程。
第一:创建XMLHttpRequest
不同的浏览器使用不同的方法来创建XMLHttpRequest对象。代码如下:
第二:发送HTTP请求。
AJAX初始化后,就可以向服务器发送HTTP请求。通过调用XMLHttpRequest对象的open()和send()方法即可实现这一功能。open()方法的作用是建立对服务器的调用。语法格式如下:
XMLHttp.open("method","url"[,flag])
说明:method参数可以是GET或POST,对应表单的GET和POST方法。url参数是页面要调用的地址,可以是相对URL或绝对URL。
示例代码:
第三:处理服务器的响应。
每当状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。例如:
XMLHttp.onreadystatechange=function_name
XMLHttp为创建的XMLHttpRequest对象。函数名称function_name不加括号,不指定参数。也可以使用JavaScript即时定义函数的方法来定义相应函数,例如:
XMLHttp.onreadystatechange=function()
{
//代码
}
里面需要用到检查请求的状态。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。readyState的取值如下:0 (未初始化);1 (正在装载);2 (装载完毕);3 (交互中);4 (完成)。所以只有当readyState=4时,函数才可以处理该响应。
示例代码如下:
写到这里,差不多就完成了!从整个过程来看,对于开发员来说代码量并不大,但是要具备一定的js能力。
完整源码共享给大家。
转载:
感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/208.html”。
- Web
- 2019-05-11
1.传统Web应用的工作原理
传统Web应用允许用户填写表单,当提交表单时向Web服务器发送一个HTTP请求。服务器接收并处理传来的表单,然后返回一个新的网页到用户浏览器。如图所示的就是传统Web应用的工作原理:
使用传统Web应用时若要改变页面的一小部分数据,需要重新加载整个页面,这是一种不友好的用户体验。而且由于每次应用的交互都需要向服务器发送请求,应用的响应时间依赖于服务器的响应时间,这有可能导致用户花费较长的等待时间。
2.AJAX的工作原理
与传统Web应用不同的是,AJAX采用异步交互过程。AJAX可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的响应。用户在页面上获得的数据是通过AJAX引擎提供的,由于页面不需要与服务器直接交互,所以客户端浏览器不需要刷新页面就能获得服务器的信息,提高了页面的友好度。如图所示的就是AJAX引擎的工作原理:
下面我就讲解一个AJAX程序处理过程。
第一:创建XMLHttpRequest
不同的浏览器使用不同的方法来创建XMLHttpRequest对象。代码如下:
第二:发送HTTP请求。
AJAX初始化后,就可以向服务器发送HTTP请求。通过调用XMLHttpRequest对象的open()和send()方法即可实现这一功能。open()方法的作用是建立对服务器的调用。语法格式如下:
XMLHttp.open("method","url"[,flag]) |
说明:method参数可以是GET或POST,对应表单的GET和POST方法。url参数是页面要调用的地址,可以是相对URL或绝对URL。
示例代码:
第三:处理服务器的响应。
每当状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。例如:
XMLHttp.onreadystatechange=function_name XMLHttp为创建的XMLHttpRequest对象。函数名称function_name不加括号,不指定参数。也可以使用JavaScript即时定义函数的方法来定义相应函数,例如: XMLHttp.onreadystatechange=function() { //代码 } |
里面需要用到检查请求的状态。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。readyState的取值如下:0 (未初始化);1 (正在装载);2 (装载完毕);3 (交互中);4 (完成)。所以只有当readyState=4时,函数才可以处理该响应。
示例代码如下:
写到这里,差不多就完成了!从整个过程来看,对于开发员来说代码量并不大,但是要具备一定的js能力。
完整源码共享给大家。
转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/208.html”。
下一篇:网站运行时间如何写代码来实现