目录
熟悉的最好的办法即使多敲几遍，再用记事本敲遍
ajax get // post 方式：
window.onload = function() {
var username = document.getElementById("username");
var email = document.getElementById("email");
var phone = document.getElementById("phone");
username.addEventListener('blur', function() {
var usernamevalue = username.value;
//1.创建对象，兼容性处理
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2,准备发送
xhr.open('get', './server/checkUsername.php?uname=' + usernamevalue, true) //true代表异步访问
//3，执行发送请求
xhr.send(null); //相当于在地址栏输入地址要敲回车一样
//4，制定回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText //返回的是字符串格式用这个
// xhr.responseXML //返回是XML格式的用这个
var username_result = document.querySelector('#username_result')
}
}
}
})
email.onblur = function() {
var emailvalue = email.value;
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var param = 'e=' + emailvalue;
xhr.open('post', './server/checkEmail.php', true);
xhr.setRequestHeader("content-Type", 'application/x-www-form-urlencoded');
xhr.send(param);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText;
}
}
}
}
phone.onblur = function() {
var phonevalue = phone.value;
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var param = 'phonenumber=' + phonevalue; //注意phonenumber一点都不能动，这是接口文档定义好的，服务器根据这个来判别用户输入是否合法
xhr.open('post', './server/checkPhone.php', true);
xhr.setRequestHeader("content-Type", 'application/x-www-form-urlencoded');
xhr.send(param);
xhr.onreadystatechange = function() { //只有当readyState改变的时候才会调用
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText; //除了xml都用这种, xhr.responseText返回的是字符串
//将result这样的字符串转换成对象
result = JSON.parse(result);
}
}
}
}
}吃透知识点：
-
get请求与post请求的区别：
get请求，在浏览器回退的时候是无害的，而post会再次发送请求
get请求会被浏览器缓存，post不会，除非手动设置
get请求只能进行url编码，post支持多种编码方式
get请求传递的参数是有长度限制的，post没有
get参数的数据类型只接受ASCII post 无限制
get更不安全，参数直接暴露在地址栏
get参数通过URL传递，post 只能放在请求体中
get直接将数据包发送过去。post先发送header服务器觉的可以，再发送数据，所以看起来是get更快一点，网络环境好 俩种方式差不多，网络环境差，动不动丢包，那post方法只要重传片段就行 效率反而更高
-
知识点延申：
请求头里面包含Connection:keep-alive 表示保持连接 不是一次连接传输就close ，保持连接 所有数据传输完了 ，才close 这样才能高效
在请求头中加入这么一个字段： Transfer-Encoding: chunked ，即表示分块传输
-
分段技术：报文采用了分段编码，分段编码只适用于 POST 提交方式。
分段传输一个片段出错不用整个数据都重新的传递，同样存在缺点，报文分段分成了很多片段，每个分组都有自己的头，很多头信息重复，导致真正到达的数据更大
-
XMLHttpRequest 被大多数浏览器支持，只有恶心的IE6 及以下不支持，做兼容性处理 ActiveXObject('Microsoft.XMLHTTP')
-
post方式 要设置请求头 setRequestHeader('Content-Type','application/x-www-form-urlencoded') 来告诉服务器需要下载什么数据，给服务器带去的信息 这里表示客户端提交给服务器的编码是url编码
-
同步情况下onreadystatechange回调函数不会执行，他不会通过浏览器去访问然后更改readystate值，而是自己直接去send
ajax的封装
传入一个对象，得到一个函数调用这个函数调用的参数就是获取的数据
//记事本编写，可能会错误，封装不够完善，明白意思就行
function myajax(obj){
var defaults={
type:'get',
url: "#",
dataTye:'json',
data:{},
async:true,
success:function(result){}
}
for(var key in obj){
defaults[key]=obj[k]
}
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
var params='';
for(var attr in defaults.data){
params+=attr+'='+defaults.data[attr]+'&';
}
if(params){
params=params.substring(0,params.length-1);//去掉最后一个&
}
if(type=='get'){
defaults.url+='?'+params;
}
xhr.open(defaults.type,defaults.url,defaults.async);
if(defaults.type=='get'){
xhr.send(null);
}else{
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(params);
}
if(defaults.async){
xhr.onreadystatechange=function(){
all();
}
}else{
all();
}
function all(){
if(xhr.readyState==4 && xhr.status==200){
var result='';
if(defaults.dataType=='json'){
result=xhr.responseText;
result=JSON.parse(result);
}else if(defaults.dataType=='xml'){
result=xhr.resopnseXML;
}else{
result=xhr.resopnseText;
}
defaults.success(result);
}
}
}
}基于自己封装的myajax函数 对上面原生的ajax进行修改，用自己封装的函数来访问
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var phone = document.querySelector("#phone");
username.onblur=function(){
var usernamevalue=username.value;
var type="get";
var url="./server/checkUsername.php";
var params="usename="+usernamevalue;
var dataType="text";
myajax({
url:url,
data:{
uname:unamevalue
},
dataType:"text",
success:function(result){
//对result数据进行处理
}
})
}
email.onblur=function(){
var emailvalue=email.value;
var type="post";
var url="./server/checkemail.php",
var dataType="text";
myajax({
type:"post",
url:url,
dataType:'text',
data:{
e:emailvalue
},
success:function(result){
//对result数据处理
}
})
}
phone.onblur=function(){
var phonevalue=phone.value;
var type="post";
var url='./server/checkphone.php';
var dataType='json';
myajax({
url:url,
type:"post",
data:{
phone:phonevalue
},
success:function(result){
//result数据处理
}
})
}
jQuery中ajax的使用：
如果自己封装了一遍ajax 发现 jQuery里面的$.ajax() $.get() $.post() 就很好理解 $.get() $.post()可以看作$.ajax()进一步封装
同样用jQuery中的ajax来对上面的进行修改
//引入jQuery内库的情况下
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var phone = document.querySelector("#phone");
username.onblur=function(){
$.ajax({
url:'./server/checkusername.php',
type:'get',
data:{
uname:usernamevalue
},
dataType:'text',
async:false,
success:function(result){
//对result处理
}
})
//或者用$.get()方法
// $.get('./server/checkusername.php?uname='+usernamevalue,function(result){
// })
}
email.onblur=function(){
$.post("./server/checkEmail.php",{e:emailvalue},function(result){
})
phone.onblur=function(){
$.post("./server/checkPhone.php",{phonenumber:phonevalue},function(result){
})
}
}
明天：跨域，jsonp原理，axios
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
