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 = '登录失败！'
}
}
}
示例：登录验证
<!-- login.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
<link rel="stylesheet" href="">
</head>
<body>
<form >
username: <input type="text" id="username" value="" /><br/>
password: <input type="password" id="password" value="" /><br/>
<button type="button" id="login">Login</button>
<span id="info"></span>
</form>
<script type="text/javascript">
/* get请求
window.onload = function(){
var login = document.getElementById('login');
var info = document.getElementById('info');
login.onclick = function(){
var uname = document.getElementById('username').value;
var pwd = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
var param = 'username='+uname+'&password='+pwd;
xhr.open('get', 'check.php?username=' + encodeURI(param), true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = xhr.responseText;
if(data == '1'){
info.innerText = '登录成功！';
}else if(data == '2'){
info.innerText = '登录失败！';
}
}
}
}
}*/
window.onload = function(){
var login = document.getElementById('login');
var info = document.getElementById('info');
login.onclick = function(){
var uname = document.getElementById('username').value;
var pwd = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('post','check.php',true);
var param = 'username='+uname+'&password='+pwd;
xhr.setRequestHeader("content-Type", "application/x-www-form-urlencoded");
xhr.send(param);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
if(data == '1'){
info.innerText = '登录成功！'
}else if(data == '2'){
info.innerText = '登录失败！'
}
}
}
}
}
}
</script>
</body>
</html>
<!-- check.php -->
<?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);
