标签：内部错误 www 不同 成员 表单验证 请求 microsoft 实体 rgs
1、AJAX - 阿贾克斯
1、什么是AJAX
Asynchronous Javascript And Xml
（异步的 JS 和 xml）
通过 JS 异步的向服务器发送请求并接收响应数据
Asynchronous：异步的
同步访问：
当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率偏低
异步访问：
当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待，效率偏高
Xml：eXtensible Markup Language
可扩展的 标签 语言
AJAX优点：
1.异步 访问
2.局部 刷新
AJAX的使用场合：
1、搜索建议
2、表单验证
3、前后端完全分离
2、AJAX的核心对象 - 异步对象(XMLHttpRequest)
1、什么是XMLHttpRequest
简称为 “xhr”
称为 "异步对象"，代替浏览器向服务器发送异步的请求并接收响应
xhr 是由JS来提供的
2、创建异步对象 (xhr)
主流的异步对象是 XMLHttpRequest 类型的，并且主流浏览器(IE7+,Chrome,Firefox,Safari,Opera)全部都支持 XMLHttpRequest。但在IE低版本浏览器中(IE6以及以下)，就不支持XMLHttpRequest，需要使用 ActiveXObject() 来创建异步对象
1、支持 XMLHttpRequest：
new XMLHttpRequest()
2、不支持 XMLHttpRequest：
new ActiveXObject("Microsoft.XMLHTTP")
ex：function getXhr() {
//如果支持创建并返回
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
#如果浏览器不支持XMLHttpRequest,则使用 ActiveXObject 创建异步对象
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
练习：
1.创建Flask项目 - Ajax01
2.创建访问路径 /01-xhr,并去往 01-xhr.html 模板
3.在模板中
创建一个按钮，单击时，通过一个 js方法，根据浏览器创建 xhr 对象并返回
3、xhr 的成员
1、方法 - open()
作用：创建请求
语法：open(method,url,async)
method：请求方式，取值‘get‘ 或 ‘post‘
url ：请求地址，字符串
async ：是否采用异步的方式发送请求
true:使用异步方式发送请求
false:使用同步方式发送请求
ex: xhr.open(‘get‘,‘/server‘,true);
2、属性 - readyState
作用：请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况
由0-4共5个值来表示5个不同的状态
0：请求尚未初始化
1：xhr已经与服务器建立连接
2：服务器端已经开始接收请求
3：请求正在处理中
4：响应已完成（重要）
3、属性 - status
作用：表示服务器端的响应状态码
200 ：表示服务器正确处理所有的请求以及给出响应
404 ：请求资源不存在
500 ：服务器内部错误
4、属性 - responseText
作用：服务器的响应数据
5、事件 - onreadystatechange
作用：每当xhr的readyState属性值发生改变的时候要触发的操作 - 回调函数(监控xhr的请求状态)
在该函数中，只有当readyState的值为4，并且status的值为200的时候，就可以正常的接收响应数据(responseText)。
6、方法 - send()
作用：通知xhr向服务器端发送请求
语法：send(body)
参数：body：表示请求主体
get请求：是没有请求主体的，所以body的值为null
xhr.send(null)
post请求：是有请求主体的，所以body的位置处要表示请求数据
xhr.send("请求数据")
xhr.send("参数=值&参数=值")
7、方法 - setRequestHeader()
目的：设置请求消息头
语法：setRequestHeader(name,value)
ex：xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
2、AJAX的操作步骤
1、GET请求
1.创建 xhr 对象
var xhr = getXhr();
2.创建请求 - open(method,url,async)
3.设置回调函数 - onreadystatechange
判断状态并接收响应数据
4.发送请求 - send()
注意：如果有请求提交数据的话需要在 url 的后面拼接查询字符串
2、GET 请求传递参数：
1、获取 xhr
2、创建请求
推荐：请求地址后拼QueryString
xhr.open(‘get‘,‘/02-server?key=value&key=value‘,true)
3、设置回调函数
4、发送请求
服务器端：
使用 request.args.get(‘name‘)接收请求参数
3、POST请求
1、创建/获取 xhr 对象
var xhr = getXhr();
2、创建请求 - open(method,url,async)
3、设置回调函数 - onreadystatechange
判断状态并接收响应数据
4、设置 Content-Type 的请求消息头
5、发送请求 - send()
注意：如果有请求提交数据的话需要在 send() 中传递数据
1、请求提交的数据要作为 send() 的参数进行提交
xhr.send("参数=值&参数=值");
2、修改请求消息头
在AJAX中，提交POST请求时，AJAX默认将 Content-Type 请求消息头的值修改为 "text/plain"了，所以导致数据无法正常提交到服务器端
解决方案：将Content-Type请求消息头的值再修改回"application/x-www-form-urlencoded"即可。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
练习：
1.创建数据库 - ajax
2.创建实体类 - Users ，映射成表
id - 主键，自增
loginname - 登录名称
loginpwd - 登录密码
uname - 用户名称
3.使用ajax验证登录名称是否存在
insert into users(loginname,loginpwd,username) values (‘admin‘,‘admin‘,‘管理员‘);
service mysql restart数据库重启
标签：内部错误 www 不同 成员 表单验证 请求 microsoft 实体 rgs
原文地址：https://www.cnblogs.com/py321/p/9940177.html
