Ajax基础知识详解

Ajax

发送ajax请求步骤：

1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest(); //标准浏览器

var xhr = new ActiveXObject("Microsoft.XMLHTTP"); //ie5, ie6

2、准备发送

xhr.open(请求方式, 请求地址, 同步或异步标志位);
/*请求方式：get(获取数据)、post(提交数据)、put(修改数据)、delete(删除数据)
 *请求地址: get请求参数在url中传递，需要注意编码问题(ie浏览器会出现中文乱码，encodeURI()用于对中文参数进行转码),
 		    如：var param = 'username='+uname+'&password='+pwd;
 		    	xhr.open('get', 'check.php?' + encodeURI(param), true);
		  post请求参数在请求体send()中传递，需要设置请求头信息，无需encodeURI()转码;
		  	如：
		  		var param = 'username='+uname+'&password='+pwd;
		  		xhr.open('post', 'check.php', true);
		  		xhr.setRequestHeader("content-Type", "application/x-www-form-urlencoded");
		  		xhr.send(param);
 *同步或异步标志位: 默认是true(异步)，false表示同步（不推荐）
*/

3、执行发送动作

xhr.send(null); //get请求，需添加 null 参数
xhr.send(param)

4、指定回调函数

/* 
	* xhr.onreadysatechange 当请求被发送到服务器时，每当 readyState 改变时，就会触发。
	* xhr.readyState 属性存有 XMLHttpRequest 的状态信息。从 0 到 4 发生变化。
    	0: 请求未初始化
    	1: 服务器连接已建立
    	2: 请求已接收
    	3: 请求处理中
    	4: 请求已完成，且响应已就绪
    * xhr.status
		200 数据相应正常
		404 没有找到资源
		500 服务器端错误
    * 服务器端响应的数据
    	xhr.responseText  获得字符串形式的响应数据。
    	xhr.responseXML   获得 XML 形式的响应数据。
*/
xhr.onreadysatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){ // readyState等于4且状态为200时，表示响应已就绪
        var data = xhr.responseText;
        if(data == '1'){
            info.innerText = '登录成功！'
        }else if(data == '2'){
            info.innerText = '登录失败！'
        }
    }
}

示例：登录验证

	
	
	
	


	

		username: 

		password: 

		Login
		
	

	

<?php
    // get请求
	/*$uname = $_GET['username'];
	$pwd = $_GET['password'];
	if($uname == 'admin' || $pwd == '123'){
		echo "1";
	}else{
		echo "2";
	}*/

	// post请求
	$uname = $_POST['username'];
	$pwd = $_POST['password'];
	if($uname == 'admin' || $pwd == '123'){
		echo "1";
	}else{
		echo "2";
	}
?>

同步与异步

• 页面加载的同步与异步（白屏与不刷新）
  普通的页面效果：w3school.org
  页面不刷新效果：评论加载

• 描述两者之间的行为方式

  ? 同步: 彼此等待 --- 阻塞

  ? 异步: 各做各的 --- 非阻塞

异步效果与JS事件处理机制

JavaScript中代码的处理方式：单线程 + 事件队列（callback queue） ；如果是纯单线程的话，js代码在执行的时候遇到耗时的操作，代码就会发生阻塞；利用事件队列的方式，代码在执行的时候会将回调函数放在事件队列中（callback queue），等主线程的任务执行完毕之后，执行event loop机制的线程会将满足执行条件的任务取出来，放入主线程中进行执行。

• 事件队列中的任务执行的条件：
  1、主线程已经空闲（同步任务已经执行完毕）
  2、任务满足触发条件。(JS中有如下三种事件类型是异步处理)
  a、定时函数（延时时间已经达到）
  b、事件函数（给DOM绑定的特定事件被触发）
  c、ajax的回调函数（服务器端有数据相应）

// 以下代码先打印1，再执行for循环，打印sum值，然后打印3，最后执行定时器函数代码打印2
    console.log(1);
    setTimeout(function(){  
        console.log(2);
    }, 0); // 不管定时器的时间设置多久，此时该函数都被放入事件队列中，只有等主线程代码执行完，才会去事件队列中查看有没有满足执行条件的函数，满足则执行。
    var sum = 0;
    for(var i=0;i<100000000;i++){
        sum += i;
    }
    console.log(sum);
    console.log(3);


// 输出结果：
// 1
// 4999999950000000
// 3
// 2

ajax封装(模拟jquery ajax)

function ajax(obj){
    // 默认参数
    var defaults = {
        type : 'get',
        data : {},
        url : '#',
        dataType : 'text',
        async : true,
        success : function(data){
            console.log(data)
        }
    }
    // 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数
    for(var key in obj){
        defaults[key] = obj[key];
    }
    // 1、创建XMLHttpRequest对象
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 把对象形式的参数转化为字符串形式的参数
    /*
    {username:'zhangsan','password':123}
    转换为
    username=zhangsan&password=123
    */
    var param = '';
    for(var attr in obj.data){
        param += attr + '=' + obj.data[attr] + '&';
    }
    if(param){
        param = param.substring(0,param.length - 1);
    }
    // 处理get请求参数并且处理中文乱码问题
    if(defaults.type == 'get'){
        defaults.url += '?' + encodeURI(param);
    }
    // 2、准备发送（设置发送的参数）
    xhr.open(defaults.type,defaults.url,defaults.async);
    // 处理post请求参数并且设置请求头信息（必须设置）
    var data = null;
    if(defaults.type == 'post'){
        data = param;
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    // 3、执行发送动作
    xhr.send(data);
    // 处理同步请求，不会调用回调函数
    if(!defaults.async){
        if(defaults.dataType == 'json'){
            return JSON.parse(xhr.responseText);
        }else{
            return xhr.responseText;
        }
    }
    // 4、指定回调函数（处理服务器响应数据）
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(defaults.dataType == 'json'){
                    // data = eval("("+ data +")");
                    data = JSON.parse(data);
                }
                defaults.success(data);
            }
        }
    }

}

//基本的使用实例

//1、异步
ajax({
    url:"login.php",
    type:'post',
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json',
    success:function(res){
        console.log(res);
    }
})

//2、同步
var res = ajax({
    url:"login.php",
    type:'post',
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json'
})
...

jQuery Ajax

• $.ajax({name:value, name:value, ... })
• $.get(URL, callback);
• $.post(URL, data, callback);