一、一些基本概念
1.什么是ajax
ajax:async JavaScript and xml。是前后台通信的一种手段,一种方式。
2.使用场景
使用ajax的场景包括前台获取数据、表单失焦验证等。
3.get和post的区别
get参数是在地址栏中,大小2000个字符左右
post参数是在请求体中,网速良好,理论上是无限大的。
二、原生js写ajax
1、创建ajax对象-xmlhttprequest对象
注意这里存在兼容性问题:
var xhr; if(window.XMLHttpRequest){ //常规,如果有,直接使用 xhr = new XMLHttpRequest(); }else{ //如果没有,老版本IE xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
2.通过监听ajax的状态的改变
其中各状态码所表达的意义:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
各响应码所表达的意义:
1xx 信息类
2xx 成功 200
3xx 重定向 304
4xx 客户端错误 404
5xx 服务端错误
xhr.onreadystatechange = function(){ console.log('xhr的状态码发生了改变'); console.log("状态码:" + xhr.readyState); console.log('响应码:' + xhr.status); console.log('响应文本:' + xhr.responseText); console.log(' '); }
3.创建请求的消息,连接服务器(状态码0=>1)
xhr.open('GET','07.php',true);
4.发送
这里如果是post请求,就传post参数,如果是get请求,发送null就行了。
xhr.send(null);
例如:用ajax发送get请求:
用户名:<input type="text" id="username"> <span id="ts"></span> <br> 密码:<input type="text"> <button id="btn">验证用户名</button> <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) }
</script>
用ajax发送post请求:
学生姓名:<input type="text" id="uname"><br> 学生成绩:<input type="text" id="score"><br> <button id="btn">注册</button> <p id="p01"></p> <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>
三、用jQuery写ajax
原生的js写ajax显得比较复杂难以理解,这里,jQuery为我们提供了一种方法ajax(),这里我们一起看一下通过jQuery怎么写ajax
用户名:<input type="text" id="username"> <span id="ts"></span> <br> 密码:<input type="text"> <button id="btn">验证用户名</button> <script> // 点击btn发送ajax请求 jquery代码 $("#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) } }) }) // 点击btn发送post请求 $("#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) } }) }) </script>