ajax传递json对象_前端设计-Ajax技术及实例展示

Ajax指的是异步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开发前端、后端与全栈的区别是什么？