[toc]
---
url 请求简图
DNS解析：IP地址每一次都不固定，所以不能用111.13.100.92这种方法
---
### 使用form表单的交互方式
```
<form action="接收请求的地址" method="GET">
<input type="text" name="username">
<input type="submit">
</form>
```
form表单每一次请求都刷新整个页面
Web的传统模型。客户端向服务器发送一个请求，服务器返回整个页面，如此反复
**method --- action --- enctype**
- Method：GET POST等
- action：address
- enctype: 规定在发送表单数据之前如何对其进行编码 application/x-www-form-urlencoded在发送前编码所有字符（默认） multipart/form-data (<input type='file'>) 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
---
### ajax
Ajax：一种不用刷新整个页面便可与服务器通讯的办法
在Ajax模型中，数据在客户端与服务器之间独立传输。服务器不再返回整个页面
用JavaScript 以异步的形式操作 xml （现在操作的是json）
++（Asynchronous javascript and xml）++
---
### 异步
人类语言中的: 异步 同步
机器语言中的: 异步 同步
---
### 在本地服务器中运行
把ajax前面的删除，换成loaclhost
---
### Ajax过程
**过程：定外卖**
1. 手机、电脑
2. APP（美团外卖、饿了么、百度外卖）
3. 打开APP --> 商家、商品、麻辣烫
4. 下单、备注（不要麻辣不要烫）
5. 监听外卖信息
6. 开门、验货 ---> 处理
<br>
**ajax:**
1. 浏览器
2. ajax对象
3. ajax.open('请求方式', 'url', true)
4. ajax.send();
5. onreadystatechange 4
6. status == 200 404 403 503
---
### Ajax 的一些属性和方法
---
### 封装Ajax函数
++创建ajax对象++ - 兼容IE
```
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); // W3C
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp'); // IE
}
```
------
```
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
xhr.open('GET','./getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
console.log(JSON.parse(xhr.responseText))
}
}
}
```
GET请求的ajax，完整版；
```
function ajaxFunc(callback) {
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
xhr.open('GET','./getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
callback(xhr.responseText);
}
}
}
}
```
----
### POST请求ajax
```
function ajaxFunc(callback) {
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
xhr.open('POST','./post.php',true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 请求头；设置编码格式
xhr.send('username=aimee&age=18');
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
callback(xhr.responseText);
}
}
}
}
```
---
### 通用ajax
```
function ajaxFunc(method, url, data, callback, flag) {
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
method = method.toUpperCase; // 转成大写
if(method == 'GET') {
xhr.open(method, url +'?' + data, flag);
xhr.send();
}else if(method == 'POST') {
xhr.open(method, url, flag);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.send(data);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
callback(xhr.responseText);
}
}
}
}
```
---
++左侧html部分++
```
<ul id="ul"></ul>
<button id="btn"></button>
<form>
<input type="text" name="username" id="username">
<input type="text" name="age" id="age">
<input type="submit" id="sub">
</form>
```
---
++触发函数++ -- GET
```
btn.onclick = function() {
ajaxFunc('GET', './getNews.php', '', showList, true);
}
```
++触发函数++ -- POST
```
sub.onclick = function(e) {
e.preventDefault(); // 取消form表单默认事件
var data = 'username=' + username.value + '&age=' + age.value; // input中的字符串拼接
console.log(data)
ajaxFunc('POST', './post.php', data, showPerson, true)
}
```
---
++作为回调的函数++ GET
```
function showList(data) {
var value = JSON.parse(data);
var str = '';
value.forEach(function(ele,index) {
str += '<li>' + ele.title + '-' + ele.date + '</li>'
})
ul.innerHTML = str;
}
```
++作为回调的函数++ POST
```
function showPerson(data) {
alert(data);
}
```
---