目录
熟悉的最好的办法即使多敲几遍,再用记事本敲遍
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