1.什么是AJAX
Asynchronous Javascript And Xml
异步的 JS 和 xml(EXtensible Markup Language)
通过 JS 异步的向服务器发送请求并接收响应数据
同步访问：
当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低
异步访问：
当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待
AJAX优点：
1.异步访问
2.局部刷新
使用场合：
1.搜索建议
2.表单验证
3.前后端分离
2.AJAX核心对象 - 异步对象(XMLHttpRequest)
1.什么是XMLHttpRequest [简称为 xhr]
称为 “异步对象”，代替浏览器向服务器发送异步的请求并接收响应
[xhr 是由JS来提供的]
2.创建 异步对象 (xhr)
1.IE7+,Chrome,Firefox,Safari,Opera) -> 调用 XMLHttpRequest 生成 xhr对象
2.IE低版本浏览器中(IE6以及以下) -> 调用 ActiveXObject() 生成xhr
<script>
if(window.XMLHttpRequest){
//支持 XMLHttpRequest
var xhr = new XMLHttpRequest();
}else{
//不支持XMLHttpRequest,使用 ActiveXObject 创建异步对象
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
</script>
3.xhr 的成员
1.方法 - open()
作用：创建请求
语法：open(method,url,asyn)
参数：
method:请求方式，取值’get’ 或 ‘post’
url:请求地址，字符串
asyn:是否采用异步的方式 - true:异步 / false:同步
ex: xhr.open(‘get’,’/server’,true);
2.方法 - send()
作用：通知xhr向服务器端发送请求
语法：send(body)
参数：
get请求：body的值为null -> send(null)
post请求：body的值为请求数据 -> send(“请求数据”)
3.属性 - readyState
作用：请求状态，通过不同的请求状态来表示xhr与服务器的交互情况
由0-4共5个值来表示5个不同的状态
| 状态 | 说明 |
|---|---|
| 0 | 代理被创建，但尚未调用 open() 方法。 |
| 1 | open() 方法已经被调用。 |
| 2 | send() 方法已经被调用，响应头也已经被接收 |
| 3 | 下载中； responseText 属性已经包含部分数据。 |
| 4 | 下载操作已完成 |
4.属性 - responseText
作用：响应数据
5.属性 - status
作用：服务器端的响应状态码
| 状态吗 | 说明 |
|---|---|
| 200 | 表示服务器正确处理所有的请求以及给出响应 |
| 404 | 请求资源不存在 |
| 500 | 服务器内部错误 |
6.事件 - onreadystatechange
作用：每当xhr的readyState发生改变的时候都要触发的操作；
也称作回调函数；当readyState的值为4且status值为200的时候，才可以获取响应数据
3.AJAX的操作步骤
1.GET请求
//1.创建xhr请求
var xhr = createXhr();
//2.创建请求 - open()
xhr.open('get',url,asyn[true|false])
//3.设置回调函数 - onreadystatechange
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//接收响应
var res = xhr.responseText;
}
}
//4.发送请求
xhr.send(null);
//注意：若含有请求参数 - URL后拼接 查询字符串 QueryString
//ex: xhr.open('get','/url?key=value&key=value',asyn)
2.POST请求
//1.创建xhr请求
var xhr = createXhr();
//2.创建请求 - open()
xhr.open('post',url,asyn[true|false])
//3.设置回调函数 - onreadystatechange
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//接收响应
xhr.responseText;
}
}
//4设置Content-Type;
//默认ajax post的Content-Type为 "text/plain;charset=utf-8"
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5.发送请求
xhr.send('请求数据');
//请求数据同查询字符串 "uname=guoxiaonao&age=18"
AJXC练习
1get请求页面
<!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>
<input type="text" id="uname">
<button id="btn">发送get请求</button>
<div id="show"></div>
<script src="static/common.js"></script>
<script>
var a=document.getElementById('uname');
//将get请求需要提交的数据拼接到地址栏
var btn=document.getElementById('btn');
btn.onclick=function(){
var url='/getSever?uname='+a.value
xhr.open('get',url,true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById('show').innerHTML = xhr.responseText;
}
// console.log(url);
}
// 发送请求
}
</script>
</body>
</html>
2post请求页面
<!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>
<div>
姓名 <input type="text" id="uname">
</div>
<div>
年龄 <input type="text" id="age">
</div>
<div>
邮箱 <input type="text" id="email">
</div>
<button id="btn">提交</button>
<div id="show"></div>
<script src="static/common.js"></script>
<script>
var btn=document.getElementById('btn');
btn.onclick=function(){
xhr.open('post','/postSever',true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var div=document.getElementById('show')
div.innerHTML=xhr.responseText;
}
}
var uname=document.getElementById('uname').value;
var age=document.getElementById('age').value;
var email=document.getElementById('email').value;
var data='uname='+uname+'&age='+age+'&email='+email
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(data);
}
</script>
</body>
</html>
搭建flask为服务器
from flask import Flask,render_template,request
app=Flask(__name__,template_folder='templates',static_folder="/home/tarena/桌面/1906/WEb/AJAX/day01/static")
@app.route('/')
def show_view():
return render_template('index1.html')
# methods=['get','post']表示但前可以接收get请求和post请求
@app.route('/usr/login',methods=['get','post'])
def show_user():
# 接收form表单get请求接收的数据
# print(request.args)
# dic=request.args.get('uname')
# # 从前端获取input name ='uname'的值
# pwd=request.args.get('password')
# print(pwd)
#接收表单post提交的数据
print(request.form)
name=request.form.get('uname')
pwd=request.form.get('password')
return '<h1>欢迎您%s</h1>'%name
@app.route('/xhr')
def xhr_show():
return render_template('xhr.html')
@app.route('/getSever')
def get_sever():
uname = request.args.get("uname")
if uname:
return '欢迎%s'%uname
else:
return '接收AJAXget请求成功'
#403 权限不足 禁止访问
#405 请求方式不允许
# 500 服务器内部错误 (视图函数代码有错误)
@app.route('/01get')
def get_01():
return render_template('calc.html')
@app.route('/calcSever')
def calc_show():
#如果是get请求时 如果有数据 处理get请求提交的数据
#如果没有数据显示页面calc.html
if request.method=='GET':
if request.args:
print(request.args)
top=int(request.args.get('opt'))
number1=int(request.args.get('number1'))
number2=int(request.args.get('number2'))
if top==0:
number3=number1-number2
return str(number3)
else:
number3=number1+number2
return str(number3)
else:
return render_template('calc.html')
@app.route('/postSever',methods=['get','post'])
def sever_post():
#如果是get请求显示页面ajax-post.html
#如果是post请求处理数据
if request.method=='GET':
return render_template('ajax-post.html')
elif request.method=='POST':
uname=request.form.get('uname')
age=request.form.get('age')
email=request.form.get('email')
print(uname,age,email)
return '接收post数据成功'
if __name__ == "__main__":
app.run(debug=True)
```
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
