郑州模板网站seoaoo
一、Ajax概述
1．什么是同步，什么是异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态（不能进行其他操作）
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（可以进行其他操作）
2．Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
二、js原生的Ajax技术
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1. 创建异步对象 var xmh=new XMLHTTPRequest();
2. 通过xmh对象离的open() 设置请求的url等参数 open(请求的方式，请求的url，async默认异步)和服务器简历连接
3. 构建请求所需的数据，并通过xmh对象的 send() 发送请求给服务器
4. 通过xmh对象的 onreadystatechange 事件监听服务器和你得通信状态（注册事件）
5. 在注册的事件中获取返回值并在页面中显示(responseText)
Post请求步骤也如上，只不过要修改open()请求方式
详解：
1.XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
1．老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var iable=new ActiveXObject("Microsoft.XMLHTTP");
兼容性写法：
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}2.XMLHttpRequest 对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();| 方法 | 描述 |
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 · method：请求的类型；GET 或 POST · url：文件在服务器上的位置 · async：true（异步）或 false（同步） |
| send(string) | 将请求发送到服务器。 · string：仅用于 POST 请求 |
3.服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;4.onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化 · 1: 服务器连接已建立 · 2: 请求已接收 · 3: 请求处理中 · 4: 请求已完成，且响应已就绪 |
| status | 200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}var iable=new ActiveXObject("Microsoft.XMLHTTP");兼容性写法：
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}案例：
get请求：请求的数据通过 url+？username=this.value&email=this.value
send()为空
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" ><label for="name">姓名：</label><input type="text" name="username" id="name"><span id="reg"></span><br><label for="email">邮箱：</label><input type="email" name="email" id="email"><br><input type="submit" value="提交">
</form>
</body>
<script>//document.getElementsByName("name属性所对应的值")var user = document.getElementsByName("username")[0];user.onblur = function () {
// alert(this.value);//获取当前的输入值var url = './04.php?username=' + this.value;var reg = document.getElementById("reg");//1.创建ajax对象var ajaxobg = new XMLHttpRequest();//2.打开请求的方式及路径数据ajaxobg.open('get',url,true);//3.发送数据 get请求为空,send()发送数据只为post发送请求数据ajaxobg.send(null);//4.响应事件ajaxobg.onreadystatechange = function () {//5.通过响应的状态来确定是否响应成功if(this.readyState==4 && this.status==200){if(this.responseText==0){reg.innerHTML = '<span color="green">可用</span>';}else {reg.innerHTML = '<span color="green">已被占用</span>';}}else {alert("响应未成功！")}}}
</script>
</html>
setRequestHeader('Content-Type','application/x-www-form-urlencoded');<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username"><br><label for="password">密 码：</label><input type="password" id="password" name="password"><br><input type="submit" value="登录">
</form>
</body>
<script>document.getElementsByName("form")[0].onsubmit = function () {var inps = document.getElementsByTagName("input");//1.创建提交数据的异步对象var ajaxobj = new XMLHttpRequest();//2.打开请求的路径、同步还是异步ajaxobj.open('post','后台接口路径',true);//3.post请求需要设置请求头，原因：未设置返回来的是一个空Array数组ajaxobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//4.发送请求，post请求的数据在send函数中(多个请求数据之间用&进行连接)ajaxobj.send('username='+inps[0].value+'&password='+inps[1].value);//5.请求成功后会触发一个事件ajaxobj.onreadystatechange = function () {//通过readyState/status判断是否响应成功 this指当前响应if(this.readyState == 4 && this.status == 200){//接受响应过来的字符串var text = this.responseText;//将后台返回的字符串变成js对象 eval()var res = eval('('+text+')');//后面把对象中的数据动态的绑定到dom中//略……}}}
</script>
</html>
转换成js对象后打印出的对象格式：
后台返回给前台text是一段html代码；前台通过onreadystatechange接收到响应之后直接通过innerHTML输出到页面，浏览器会直接帮我们解析：
不常用
补充知识：
JSON 解析和生成
在 JavaScript 中，有两个方法与此相关： JSON.parse 和 JSON.stringify
<script>var str = '{"name":"muzidigbig","age":22}';
// JSON.parse(string);将符合json语法规则的字符串转换成obj对象var obj = JSON.parse(str);console.log(obj);
// JSON.stringify(obj);将obj对象转换成json字符串var jsonstr = JSON.stringify(obj);console.log(jsonstr);console.log(typeof jsonstr);
</script>
Json格式在线校验：https://www.json.cn/
get和post有什么区别？
1.get一般是获取数据，post一般是提交数据
2.get参数会放在url上，所以安全性比较差，post是放在body中
3.get请求刷新服务器或退回是没有影响的，post请求退回时会重新提交数据
4.get请求时会被缓存，post不会
5.get请求会被保存在浏览器历史记录中，post不会
6.get请求只能进行url编码，post请求支持很多种
若有不足请多多指教！希望给您带来帮助！