传统方法的缺点
传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽,由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
什么是ajax
ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest 对象
XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest
方 法 | 描 述 |
abort() | 停止当前请求 |
getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
getResponseHeader("header") | 返回指定首部的串值 |
open("method","URL",[asyncFlag],["userName"],["password"]) | 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数,是否异步,用户名,密码 |
send(content) | 向服务器发送请求 |
setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 ) |
readyState的五种状态
- 请求尚未初始化, 已经创建了一个XMLHttpRequest对象
- 服务器链接已经建立, 已经调用了XMLHttpRequest对象的open方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
- 请求已经发送, 已经通过send方法把一个请求发送到服务器端,但是还没有收到一个响应
- 请求处理中, 已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到
- 请求完成, 且响应已经就绪
请求步骤
1.创建XMLHTTPRequest对象
2.注册事件
3.使用open方法设置和服务器的交互信息
4.设置发送的数据,开始和服务器端交互
创建后台测试接口
为了测试,我实现了简单的ssm,创建了Controller层接口
请求连接为http://localhost:8080/myssm/test/test,入参为id=1
package com.controller;
import com.pojo.UserEntity;
import com.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@RequestMapping("test")
@Controller
public class TestController {
@Autowired
private TestService testService;
@RequestMapping("test")
@ResponseBody
public UserEntity test(String id){
return testService.test(Integer.parseInt(id));
}
}
原生ajax实现GET请求
//创建XMLHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
//重写onreadystatechange方法,状态改变就会调用,如果readyState==4&&xmlHttpRequest.status == 200,说明请求成功且有返回
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status == 200){
console.log(xmlHttpRequest.responseText);
alert(xmlHttpRequest.responseText);
}
};
//设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
xmlHttpRequest.open('GET','http://localhost:8080/myssm/test/test?id=1');
//发送ajax请求
xmlHttpRequest.send();
原生ajax实现POST请求
//创建XMLHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
//重写onreadystatechange方法,如果readyState==4&&xmlHttpRequest.status == 200,说明请求成功且有返回
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status == 200){
console.log(xmlHttpRequest.responseText);
alert(xmlHttpRequest.responseText);
}
};
//设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
xmlHttpRequest.open('POST','http://localhost:8080/myssm/test/test');
//设置数据内容类型为application/x-www-form-urlencoded
xmlHttpRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送ajax请求
xmlHttpRequest.send('id=1');
使用原生Ajax实现的GET和POST请求的区别
- 请求方式不同,一个是GET,一个是POST
- 请求参数存放的位置,GET的请求参数直接拼接在url后面,POST的请求参数存放在body体中且需要设置请求数据类型为application/x-www-form-urlencoded