什么是AJAX请求?
AJAX,即 “Asynchronous Javascript And Xml” (异步JavaScript和Xml)
是指一种创建交互式页面应用的网页开发技术
ajax是一种浏览器通过js异步发起请求,局部更新网页的技术
原生的AJAX请求
API
open(method,url,async)
- method 规定请求的类型:GET 或 POST
- url 表示文件在服务器上的位置
- async true(异步)/false(同步)
send(string)
将请求发送到服务器
- string:仅仅用于POST请求
//在这里使用javaScript语言发起Ajax请求,访问服务器Servlet中的方法
function ajaxRequest(){
//1首先要创建XML HttpRequest(它是Ajax的基础)
var xmlhttprequest = new XMLHttpRequest();
//2调用open方法设置请求参数
xmlhttprequest.open()
//3调用send方法发送请求
//4在send方法前绑定onreadystatechange事件,处理请求完成后的操作
}
AJAX服务器响应
如果需要获得来自服务器的响应,请使用XMLhttpRequest对象的responseText或responseXML属性
- responseText :获取字符串形式的响应数据
- responseXML:获取xml形式的响应数据
onreadystatechange事件
当请求发送到服务器时,我们需要做一些基于响应的任务
每当xmlhttprequest的readyState属性改变的时候,就会触发此事件
readyState属性存有XMLHttpRequest的状态信息
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或者函数名),每当readyState属性改变时,就会调用该函数 |
readyState | 存有XMLHttpRequest的状态,从0到4发生变化:0请求未初始化1服务器连接建立2请求已经接收3请求处理中4请求完成且响应就绪 |
status | 200:”OK“ 404:未找到页面 |
在onreadystatechange事件中,我们规定当服务器响应已经做好被处理的准备时所执行的任务
当我们判断到readyState=4且状态码为200时,表示响应已经就绪(直接.查看)
jQuery中的AJAX请求
相关API
$.ajax方法
url 表示请求的地址
type 表示请求的类型GET或者POST
data 表示发送给服务器的数据
格式有两种:
一、name = value & name =value
二、{key:value}
success 请求成功,响应的回调函数
dataType 响应的数据类型
$.get方法和$.post方法
url 请求地址
data 发送的数据
callback 成功后的回调函数
type 返回的数据类型
$.getJSON方法
url 一样
data
callback
表单序列化serialize()
可以把表单里面所有的表单项都获取,并且通过name = value & name =value的方法进行拼接
data.key可以读取所有的键值对值
form自带的提交是整个页面跳转过去提交
ajax请求则可以不跳转