网络请求-Ajax
一、背景
1、url请求简图
2、请求页面方法的发展
Web的传统模型（form）。客户端向服务器发送一个请求，服务器返回整个页面，如此反复。
在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面。
之前请求数据都用form表单，但是每请求一次，都要重新刷新一次页面，用户体验特别不好，所以现在用ajax，可以实现局部页面请求数据。
3、form表单
method action enctype
<form action="" method=""> <input type="text" name="username"> <input type="text" name="age"> <input type="submit" value = "登录"> </form>
Method：GET POST等，get：请求数据，post输入数据
action：address
enctype: 规定在发送表单数据之前如何对其进行编码 application/x-www-form-urlencoded在发送前编码所有字符（默认） multipart/form-data (<input type='file'>)不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
二、Ajax
1、什么是Ajax
用JavaScript 以异步的形式操作 xml （现在操作的是json）
全称：Asynchronous javascript and xml 异步js和xml
2、异步、同步
人类语言中的: 异步（非同时进行，按照顺序来） 同步
机器语言中的: 异步（同时进行） 同步（非同时进行，按照顺序来）
3、Ajax工作流程
①打开浏览器（www目录中打开，将www之前路径改为localhost）
②创建ajax对象（兼容IE和其他浏览器）
var ax = null;
if (window.XMLHttpRequest) {
ax = new XMLHttpRequest();
//其他浏览器
} else {
ax = new ActiveXObject('Microsoft.XMLHttp');
//ie
}
③ajax.open(method,url,true)：建立对服务器的调用，method参数可以是GET,POST或PUT。url参数可以是相对URL或绝对URL。true：异步请求，false：同步请求。这个方法还包括3个可选参数
④ajax.send(content)： post时，需要写content：向服务器发送请求
⑤onreadystatechange：监听请求状态，状态改变时的事件触发监听器
readyState ：对象状态（integer）
状态值：
0 = 未初始化，未调用send()方法
1 = 读取中，已调用send()，正在发送请求
2 = 已读取，send方法执行完成，接收到全部响应内容
3 = 交互中，正在解析响应内容
4 = 完成，响应内容解析完成
⑥status == 200服务器返回的状态码，如：404 = “文件未找到”、200 = “成功” 500 = “服务器内部错误” 304=“资源未被修改”
4、Ajax对象方法
|
方法 |
描述 |
|
abort() |
停止当前请求 |
|
getAllResponseHeaders() |
把http请求的所有响应首部作为键/值对返回 |
|
getResponseHeader('server') |
返回值指定首部的串值 |
|
open(“method”, “url”, true) |
建立对服务器的调用，method参数可以是GET,POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数 |
|
send(content) |
向服务器发送请求 |
|
setRequestHeader(“label”, “value”) |
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
5、Ajax属性
|
属性 |
描述 |
|
onreadystatechange |
状态改变的事件触发器 |
|
readyState |
对象状态（integer），状态值 0 = 未初始化，未调用send()方法 1 = 读取中，已调用send()，正在发送请求 2 = 已读取，send方法执行完成，接收到全部响应内容 3 = 交互中，正在解析响应内容 4 = 完成，响应内容解析完成 |
|
responseText |
获得字符串形式的响应数据 |
|
responseXML |
获得XML形式的响应数据 |
|
status |
服务器返回的状态码，如：404 = “文件未找到”、200 = “成功” 500 = “服务器内部错误” 304=“资源未被修改” |
|
statusText |
服务器返回的状态文本信息 |
6、封装自己的Ajax方法ajax.js
function ajaxFunc(method, url, data, callback, flag) { // 请求方法、请求地址、数据、回调函数，异步同步 var aj = null; if (window.XMLHttpRequest) { aj = new XMLHttpRequest(); //其他浏览器 } else { aj = new ActiveXObject('Microsoft.XMLHttp'); //ie } method = method.toUpperCase(); if (method == 'GET') { aj.open(method, url + '?' + data, flag); // 请求方法、请求地址、数据、异步同步 aj.send(); } else if (method == "POST") { aj.open(method, url, flag) // 请求方法、请求地址、异步同步 aj.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 设置请求头部：把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() aj.send(data); // 数据 } aj.onreadystatechange = function () { if (aj.readyState == 4) { if (aj.status == 200) { callback(aj.responseText); } } } }
7、ajax初级应用index.html（放在www目录里才能操作）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- post请求 -->
<form>
<input type="text" name="username" id='username'>
<input type="text" name="age" id="age">
<input type="submit" id="sub">
</form>
<!-- get请求 -->
<button id='btn'>获得新闻</button>
<ul id='ul'></ul>
<script>
// get请求
btn.onclick = function () {
// 点击button时，向服务器请求数据
ajaxFunc('GET', './getNews.php', '', showList, true);
}
function showList(data) {
// 将get来的数据显示
var value = JSON.parse(data);
var str = '';
value.forEach(function (ele, index) {
str += '<li>' + ele.title + '-' + ele.date + '</li>';
})
ul.innerHTML = str;
}
// post请求
sub.onclick = function (e) {
// 点击提交按钮，向服务器提交数据
e.preventDefault();
var data = 'username=' + username.value + '&age=' + age.value;
ajaxFunc('post', './post.php', data, showPerson, true);
}
function showPerson(data) {
// 将post的数据alert
alert(data);
}
</script>
<script src="./ajax.js"></script>
</body>
</html>
浙公网安备 33010602011771号