您现在的位置是:首页 > 学无止境 > Web网站首页Web 如何写AJAX让PHP与AJAX交互

如何写AJAX让PHP与AJAX交互

  • 莫愁
  • Web
  • 2019-05-11
简介AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发技术。
字数 2433

1.传统Web应用的工作原理

传统Web应用允许用户填写表单,当提交表单时向Web服务器发送一个HTTP请求。服务器接收并处理传来的表单,然后返回一个新的网页到用户浏览器。如图所示的就是传统Web应用的工作原理:

传统web工作原理

 

使用传统Web应用时若要改变页面的一小部分数据,需要重新加载整个页面,这是一种不友好的用户体验。而且由于每次应用的交互都需要向服务器发送请求,应用的响应时间依赖于服务器的响应时间,这有可能导致用户花费较长的等待时间。

2.AJAX的工作原理

与传统Web应用不同的是,AJAX采用异步交互过程。AJAX可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的响应。用户在页面上获得的数据是通过AJAX引擎提供的,由于页面不需要与服务器直接交互,所以客户端浏览器不需要刷新页面就能获得服务器的信息,提高了页面的友好度。如图所示的就是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能力。

完整源码共享给大家。

AJAX.rar 解压密码:www.mochoublog.com
AJAX.rar (3.16 KB)


转载: 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/208.html”。

文章评论

    • 评论
    人参与,条评论

技术在线

服务时间

周一至周日 12:00-22:00

关闭下雪
关闭背景特效