1.具体步骤
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互
4.注册事件
5.更新界面
2.get请求
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端ajax.open('get','getStar.php?starName='+name);//步骤三:发送请求ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用ajax.onreadystatechange = function () { if (ajax.readyState==4 &&ajax.status==200) { //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 console.log(ajax.responseText);//输入相应的内容 }} |
3.post请求
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//创建异步对象 var xhr = new XMLHttpRequest();//设置请求的类型及url//post请求一定要添加请求头才行不然会报错xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.open('post', '02.post.php' );//发送请求xhr.send('name=fox&age=18');xhr.onreadystatechange = function () { // 这步为判断服务器是否正确响应 if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; |
4.封装方法
为了方便使用,封装一个方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
function ajax_method(url,data,method,success) { // 异步对象 var ajax = new XMLHttpRequest(); // get 跟post 需要分别写不同的代码 if (method=='get') { // get请求 if (data) { // 如果有值 url+='?'; url+=data; }else{ } // 设置 方法 以及 url ajax.open(method,url); // send即可 ajax.send(); }else{ // post请求 // post请求 url 是不需要改变 ajax.open(method,url); // 需要设置请求报文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 判断data send发送数据 if (data) { // 如果有值 从send发送 ajax.send(data); }else{ // 木有值 直接发送即可 ajax.send(); } } // 注册事件 ajax.onreadystatechange = function () { // 在事件中 获取数据 并修改界面显示 if (ajax.readyState==4&&ajax.status==200) { // console.log(ajax.responseText); // 将 数据 让 外面可以使用 // return ajax.responseText; // 当 onreadystatechange 调用时 说明 数据回来了 // ajax.responseText; // 如果说 外面可以传入一个 function 作为参数 success success(ajax.responseText); } }} |
2.jquery的ajax方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
login.addEventListener('click', () => { // if (username.value == uname && password.value == upw) { $.ajax({ type: 'post', // 请求方式 url: 'http://127.0.0.1:3007/api/login', // 路径 // contentType: "application/json", dataType: 'json', // 这里是指定了参数的类型 data: { 'username': username.value, 'password': password.value } , success: function (res) { console.log(res); // var yanzheng = { status: 0, message: '登录成功！' } if (res.status == 0) { alert('登录成功'); self.location.href = "index.html?id=" + res.id; } else { alert('请输入正确的用户名或密码') } } }) }) |
参数
options
类型：Object
可选。AJAX 请求设置。所有选项都是可选的。
async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache
类型：Boolean
默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
jQuery 1.2 新功能。
contentType
类型：String
默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context
类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
就像这样：
|
1
2
3
|
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }}); |
暂无评论内容