AJAX初识

ajax

ajax:(async javascript and xml)，客户端js中的方法，用来向服务器端发送请求，然后把服务器端返回的内容获取到

一、xml

可扩展的标记语言（标签都是自己扩展的） 利用自己扩展的有规则的标记来存储相关数据

二、创建ajax对象

在js中写：

主流方式： var xhr =new XMLHttpRequest(); var xhr = new ActiveXObject();

三、发起对服务器的请求

核心是三步，下面的第三步是获取内容是需要写，可以不写

//ajax发起请求 function f1(){ //1.创建ajax对象 var xhr = new XMLHttpRequest();//IE6及以下不兼容 //2.创建一个新的http请求(打开浏览器，输入请求地址) //xhr.open(请求方式get/post,请求地址,[异步同步请求(false同步,true异步)]); xhr.open("get",'./try.php'); //3.给 xhr.onreadystatechange 这个事件绑定一个方法，监听状态的变化（只要状态改变就触发执行） xhr.onreadystatechange = function (){ if(xhr.readyState === 4 && /^2\d{2}$/.text(xhr.status)){ var val =xhr.responseText; } } //4.发送请求 //xhr.send(post请求 数据 / get请求 null);参数是请求主体中传递给服务器的内容 xhr.send(null); }

1.xhr.readyState: //0：UNSET 当前请求还没有被发送 //1：OPENED URL地址已经打开 //2：HEADERS_RECEIVED 响应头信息已经接收 //3：LOADING 主要返回的内容正在服务器端进行准备处理 //4：DONE 响应主体的内容已经成功返回到客户端 2.xhr.status ：HTTP网络状态码，描述了服务器响应内容的状态 //200 OR ^2\d{2} 200或者以2开头的三位数 – >代表响应主体内容成功返回 //301 : 永久重定向/永久转移 //302 : 临时重定向/临时转移 //304 : 本次获取的内容是读取缓存中的数据

//400 : 客户端传递给服务端的参数出现错误 //401 : 无权访问 //404 : 客户访问的地址不存在 //500 : 未知的服务器错误 //503 : 服务器已经超负荷

四、客户端向服务器端发送请求的方式

GET : 一般应用于从服务器获取数据（给服务器的少，从服务器拿的数据多，项目中最常用）

使用get请求，一般都使用“URL问号传参的方式” xhr.open(“get”,"./xxx?");

POST : 一般应用于向服务器推送数据

使用post请求，一般都使用“请求主体的方式” xhr.open(“post”,"./xxx");

PUT ： 一般应用于给服务器上增加资源文件DELETE : 一般应用于从服务器上删除资源文件HEAD :一般应用于只获取服务器的响应头信息

举个栗子，用户名重复判断

<h1>注册界面</h1> <form action="" method="get"> 用户名：<input type="text" name="username" id="username"> <input type="button" value="验证" id="btn"> <span id="result"></span> <br> 密码：<input type="password" name="password"><br> <input type="submit" value="提交"> </form> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ var username = document.getElementById("username").value; var xhr = null; //做浏览器的兼容 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("get","./login.php?username=" + username,true); //问号后面为需要的参数 xhr.send(null); // 使用post方法时的区别,参数位置 // xhr.open("post","login.php",true); // xhr.send("username=" + username); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { var result = xhr.responseText; console.log(result); document.getElementById("result").innerText = result; } } }; }; }; </script> <?php $uname = $_GET["username"]; if($uname == 'zhangsan'){ echo "username exists"; }else{ echo "username ok"; } ?>

ajax中同步异步理解

var xhr = new XMLHttpRequest(); xhr.open("get",'./ajax.txt',true); //为true时，输出2,3,4；false时，输出4 xhr.onreadystatechange = function (){ console.log(xhr.readyState); } xhr.send(null); var xhr = new XMLHttpRequest(); xhr.open("get",'./ajax.txt',true); //为true时，输出2,3,4；false时，没有输出 xhr.send(null); xhr.onreadystatechange = function (){ console.log(xhr.readyState); }

获取服务器时间需要在2的时候

GET pk POST

大小问题

GET请求传递给服务器的内容存在大小的限制，而POST理论上没有限制

缓存的问题

GET请求会出现缓存（这个缓存不一定是304），POST是没有缓存的。 项目中GET请求一般不会让其出现缓存，“清除缓存”：在URL的末尾追加一个随机数 xhr.open(“get”,"./xxx?num=12&_=" + Math.random());

安全问题

一般来说GET不安全，而POST相对安全一些