JavaScript自我学习路线
一、Ajax简介
- Ajax即Asynchronous JavaScript and XML,是一种创建快速动态网页的技术, 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新,这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新
- jQuery提供多个与Ajax有关的方法,通过这些方法,可以使用HTTP的Get和Post从远程服务器上请求文本、HTML、XML或JSON,同时能够把接收的数据更新到DOM对象
- 即使用jQuery的函数,可以实现Ajax请求的处理,没有jQuery之前,使用XMLHttpRequest做Ajax,有4个步骤:
- 创建异步对象:var xmlHttp = new XMLHttpRequest()
- 绑定事件:xmlHttp.onreadystatechange = function(){获取服务器端返回的数据,更新DOM}
- 初始化请求参数:xmlHttp.open(get,url,true)
- 发送请求:xmlHttp.send()
- 附:页面加载readyState的五种状态与XMLHttpRequest对象的生命周期
- 有jQuery之后,简化了Ajax请求的处理,使用三个函数就可以实现Ajax请求的处理
- $.ajax():jQuery中实现Ajax的核心函数
- $.post():使用post方式做Ajax请求
- $.get():使用get方式发送Ajax请求
- $.post()和$.get()内部都是调用的$.ajax()
- 同步:同一时刻只能做一件事,上一步完成才能开始下一步
- 异步:同时做多件事,效率更高,做一件事情时,不影响另一件事情的进行
二、$.ajax()
- $.ajax()是jQuery中Ajax请求的核心方法,所有的其他方法都是在内部使用此方法
- 语法格式
$.ajax({name:value,name:value......})
说明:参数是JSON的数据,包含请求方式、数据、回调方法等
JSON格式的内容
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理,默认是 true |
beforeSend(xhr) | 发送请求前运行的函数 |
cache | 布尔值,表示浏览器是否缓存被请求页面,默认是 true |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后) |
contentType | 发送数据到服务器时所使用的内容类型,默认是:“application/x-www-form-urlencoded” |
context | 为所有 AJAX 相关的回调函数规定 “this” 值 |
data | 规定要发送到服务器的数据 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数 |
dataType | 预期的服务器响应的数据类型 |
error(xhr,status,error) | 如果请求失败要运行的函数 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序,默认是 true |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功,默认是 false |
jsonp | 在一个 jsonp 中重写回调函数的字符串 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称 |
password | 规定在 HTTP 访问认证请求中使用的密码 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true |
scriptCharset | 规定请求的字符集 |
success(result,status,xhr) | 当请求成功时运行的函数 |
timeout | 设置本地的请求超时时间(以毫秒计) |
traditional | 布尔值,规定是否使用参数序列化的传统样式 |
type | 规定请求的类型(GET 或 POST) |
url | 规定发送请求的 URL,默认是当前页面 |
username | 规定在 HTTP 访问认证请求中使用的用户名 |
xhr | 用于创建 XMLHttpRequest 对象的函数 |
- 主要使用url、success、data、dataType
1. async
布尔值,表示请求是否异步处理,默认是true
2. contentType
一个字符串,指发送数据到服务器时所使用的内容类型,可以不写,例如请求参数是JSON格式的:
$.ajax({contentType:"application/json"})
3. data
规定要发送到服务器的数据,即请求的参数和参数值,大部分用于post请求,可以是字符串、数组,常用的是JSON,例如:
$.ajax({data:{name:"lzj",age:20}})
4. dataType
期望从服务器返回的数据类型(即使用$.ajax()发送请求时,会把dataType的值发送给服务器,servlet可以读取到dataType的值,从而判断浏览器需要的是xml、JSON等的数据,所以服务器可以返回这些需要的数据格式)
jQuery从xml,JSON,text,html等这些中测试最可能的类型
“xml”:一个XML文档
“html”:HTML作为纯文本
“text”:纯文本字符串
“json”:以JSON运行响应,并以对象返回
$.ajax({dataType:"json"})
5. error()
一个function函数,如果请求失败要运行的函数
$.ajax({error:function(){请求失败要运行的函数}})
6. success()
当请求成功时运行的函数(相当于使用XMLHttpRequest对象,当readyState==4&&status==200),其中括号里是自定义的形参名
$.ajax({success:function(data){
// data就是responseText(返回的数据),是jQuery处理后的数据
请求成功时运行的函数
}
})
7. type
规定请求的类型(Get或Post等),默认是Get(get、post不用区分大小写)
8. url
规定发送请求的URL
三、$.get()
- $.get()使用HTTP的Get请求从服务器加载数据
- 语法格式
$.get(url,data,function(resp),dataType)
url:必须,规定需要请求的URL
data:可选,规定连同请求发送到服务器的数据
function(resp):可选,当请求成功时运行的函数,resp是自定义形参名(包含来自请求的结果数据)
四、$.post()
- $.post()使用HTTP的Post请求从服务器加载数据
- 语法格式
$.post(url,data,function(resp),dataType)
参数同$.get()