1，什么是ajax？
Asynchronous JavaScript and XML（当然现在xml已经由json代替）；
主要是用于前后台的交互（表单提交已经被废弃）；
使用场景：前台获取数据、表单的失焦验证；
2，如何在有服务的环境下使用ajax发送请求
1.创建ajax对象-xmlhttprequest对象：（分为两种类型）
在新版本的浏览器中：variable=new XMLHttpRequest();
老版本的IE中：variable=new ActiveXObject("Microsoft.XMLHTTP");
所以在这里我们需要考虑到兼容性的问题：
var xhr; ???????if(window.XMLHttpRequest){ ???//常规，如果有，直接使用 ???????????xhr = new XMLHttpRequest(); ???????}else{ ??//如果没有，老版本IE ???????????xhr = new ActiveXObject("Microsoft.XMLHTTP"); ???????} ???????console.log(xhr) ???????console.log("状态码:" + xhr.readyState); ???????console.log(‘响应码：‘ + xhr.status); ???????console.log(‘响应文本:‘ + xhr.responseText); ???????console.log(‘步骤一完成‘)
2.通过监听ajax的状态的改变来监听：
xhr.onreadystatechange = function(){ ???????????console.log(‘xhr的状态码发生了改变‘); ???????????console.log("状态码:" + xhr.readyState); ???????????console.log(‘响应码：‘ + xhr.status); ???????????console.log(‘响应文本:‘ + xhr.responseText); ???????????console.log(‘\n‘); ???????}console.log(‘步骤二完成‘)3.创建请求的消息，连接服务器
xhr.open(‘GET‘,‘07.php‘,true); ???//最后一个参数是bool，表示同步||异步，true异步console.log(‘步骤三完成‘)
4.发送
xhr.send(null); ??//如果是post请求，就放post参数，如果是get请求，发送null就行了
5.附：
状态码：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
响应码：
1xx ??信息类
2xx ??成功 ????200
3xx ??重定向 ???304
4xx ??客户端错误 ??404
5xx ??服务端错误
3,使用ajax发送get请求
html部分：
用户名：<input type="text" id="username"> ??????<span id="ts"></span><br>密码：<input type="text"> <button id="btn">验证用户名</button>
原生js部分：
<script> ???????var username = document.getElementById("username"); ???????var btn = document.getElementById("btn"); ???????var ts= document.getElementById("ts"); ???????// 点击btn发送ajax请求 ???????btn.onclick = function(){ ???????????// 1.创建xhr ???????????var xhr; ???????????if(window.XMLHttpRequest){ ???//常规，如果有，直接使用 ???????????????xhr = new XMLHttpRequest(); ???????????}else{ ??//如果没有，老版本IE ???????????????xhr = new ActiveXObject("Microsoft.XMLHTTP"); ???????????} ???????????// 2.绑定监听函数 ???????????xhr.onreadystatechange = function(){ ???????????????if(xhr.readyState == 4){ ???????????????????if(xhr.status == 200){ ???????????????????????console.log(xhr.responseText) ???????????????????????if(xhr.responseText == 1){ ???????????????????????????ts.innerHTML = "该用户名已经被注册" ???????????????????????}else if(xhr.responseText == 0){ ???????????????????????????ts.innerHTML = "该用户名可以使用" ???????????????????????} ???????????????????} ???????????????} ???????????} ???????????// 3.建立连接 ???????????xhr.open("GET","08.php?uname=" + username.value,true); ???????????// 正则验证 ???????????// 4.发送请求 ???????????xhr.send(null) ???????} ???????//get是直接可以在地址栏中调试 ???</script>4,使用ajax发送post请求
html:
学生姓名：<input type="text" id="uname"><br>学生成绩：<input type="text" id="score"><br><button id="btn">注册</button> ???<p id="p01"></p>
原生js部分：
<script> ???????function get_id(id){ ???????????return document.getElementById(id); ???????} ???????var uname = get_id("uname"); ???????var score = get_id("score"); ???????var btn = get_id("btn"); ???????var p01 = get_id("p01"); ???????var reg_name = /^[a-z]{3,10}$/g; ???????var reg_score = /^\d{1,2}$/g; ???????var uname_flag = false; ???????uname.onfocus = function(){ ???????????reg_name.lastIndex = 0; ???????????this.style.border = ‘1px solid #000‘ ????????????uname_flag = false; ???????} ???????uname.onblur = function(){ ????????????if(reg_name.test(uname.value)){ ???????????????this.style.border = ‘1px solid #0f0‘; ???????????????uname_flag = true; ???????????}else { ???????????????this.style.border = ‘1px solid #f00‘ ???????????} ???????} ???????btn.onclick = function(){ ???????????if(uname_flag){ ???????????????// 1. ???????????????var xhr; ???????????????if(window.XMLHttpRequest){ ???//常规，如果有，直接使用 ???????????????????xhr = new XMLHttpRequest(); ???????????????}else{ ??//如果没有，老版本IE ???????????????????xhr = new ActiveXObject("Microsoft.XMLHTTP"); ???????????????} ???????????????// 2. ???????????????xhr.onreadystatechange = function(){ ???????????????????if(xhr.readyState == 4){ ???????????????????????if (xhr.status == 200) { ???????????????????????????console.log(xhr.responseText); ???????????????????????????p01.innerHTML = xhr.responseText; ???????????????????????} ???????????????????} ???????????????} ???????????????// 3. ???????????????xhr.open(‘POST‘,‘http://localhost:8888/0220ajax/09.php‘,true); ???????????????// 3.5 ?在发送post请求的时候，你得告诉服务器你发送的是一个什么 ???????????????xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ???????????????// 4.发送 ???????????????xhr.send(‘strName=‘ + uname.value + ‘&strScore=‘ + score.value); ???????????} ???????} ???</script>5,使用jQuery—ajax发送get请求
用户名：<input type="text" id="username"> ??? <span id="ts"></span> ??? <br>密码： <input type="text"> ?????<button id="btn">验证用户名</button>
$("#btn").click(function(){ ???????????$.ajax({ ???????????????type : "GET", ???????????????url : "01.php?uname=" + $("#username").val(), ???????????????success : function(data){ ??//就是原生的xhr.responseText ???????????????????console.log(data); ???????????????????if(data == 0){ ???????????????????????$("#ts").html("该用户名可以使用").css("color","green"); ???????????????????}else if(data == 1){ ???????????????????????$("#ts").html("该用户名已被占用").css("color","red"); ???????????????????} ???????????????}, ???????????????error : function(err){ ???//错误的 ???????????????????console.log(err) ???????????????} ???????????})})6,使用jQuery—ajax发送post请求
（html部分与上面相同相同）
$("#btn").click(function(){ ???????????$.ajax({ ???????????????type : "POST", ???????????????url : "http://192.168.9.154:8888/0221ajax/01.php", ???????????????data : { ???????????????????uname : $("#username").val() ???????????????}, ???????????????success : function(data){ ??//就是原生的xhr.responseText ???????????????????console.log(data); ???????????????????if(data == 0){ ???????????????????????$("#ts").html("该用户名可以使用").css("color","green"); ???????????????????}else if(data == 1){ ???????????????????????$("#ts").html("该用户名已被占用").css("color","red"); ???????????????????} ???????????????}, ???????????????error : function(err){ ???//错误的 ???????????????????console.log(err) ???????????????} ???????????})})Ajax发送请求
原文地址：https://www.cnblogs.com/1234wu/p/10414973.html