一.实验目的 |
2. 什么是Ajax技术,致力于解决什么场景?3. SpringMVC如何优化Ajax技术?4. 项目代码 |
二. 实验内容 |
1) json是一种数据格式,和数组作用一样,用于存储数据.简单的来说json就是一种数据交换格式。JSON 中支持的数据类型可以分为简单数据类型和复杂数据类型两种,其中简单数据类型包括:string(字符串)、number(数字)、boolean(布尔值)和 null(空);复杂数据类型包括:Array(数组)和 Object(对象)。2)1.AJAX全称(Async Javascript and XML)即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页2.Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面流程图如下:3.实现过程实现 Ajax异步交互需要服务器逻辑进行配合,需要完成以下步骤:创建 Ajax的核心对象 XMLHttpRequest对象通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态接受并处理服务端向客户端响应的数据结果将处理结果更新到 HTML页面中#创建XMLHttpRequest对象通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象与服务器建立连接通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接参数说明:method:表示当前的请求方式,常见的有GET、POST,url:服务端地址async:布尔值,表示是否异步执行操作,默认为trueuser: 可选的用户名用于认证用途;默认为`null,password: 可选的密码用于认证用途,默认为`null#给服务端发送数据通过 XMLHttpRequest 对象的 send() 方法,将客户端页面的数据发送给服务端
body: 在 XHR 请求中要发送的数据体,如果不传递数据则为 null如果使用GET请求发送数据的时候,需要注意如下:将请求数据添加到open()方法中的url地址中发送请求数据中的send()方法中参数设置为null绑定onreadystatechange事件onreadystatechange 事件用于监听服务器端的通信状态,主要监听的属性为XMLHttpRequest.readyState ,只要 readyState属性值一变化,就会触发一readystatechange 事件XMLHttpRequest.responseText属性用于接收服务器端的响应结果
伪造Ajax我们可以使用前端的一个标签来伪造一个ajax的样子。 iframe标签新建一个module : sspringmvc-06-ajax , 导入web支持!编写一个 ajax-frame.html 使用 iframe 测试,感受下效果
利用AJAX可以做:
jQuery.ajax
4) |
|