Ajax
Asynchronous javascript and xml
异步刷新技术
核心是XMLHttpRequest
通常get比post多
步骤
var xhr = new XMLHttpRequest();
准备发送 open(type,url,async) false代表同步 true异步
发送 send(null); 有需要就填写,没有可以不填
###xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
得到四个响应的xhr
responseText ---- 响应主体返回的文本
status ---- 响应HTTP状态码
statusText ---- HTTP状态说明
状态码 状态说明 含义
200 OK 请求成功
400 Bad Request 请求出错
404 Not Found 请求页面未找到/路径问题
500 Internal Server Error 服务器问题
异步加载需要触发onreadystatechange事件.检测readyState的属性
readyState
0 未初始化 发送过程还没发生open()未调用
1 启动 open()调用 send()未调用
2 发送 send()调用 未接受响应
3 接收 已经接收到了一部书数据了
4 完成 数据接收完成
两种头信息
响应头信息 服务器返回的信息 可以获取的但是不可以设置
请求头信息 客户端发送的信息 可以设置的但是不可以获取
ipconfig /flushdns
本地映射
修改host文件
AppServ\Apache2.2\conf\extra\httpd-vhosts.conf
<VirtualHost *:80>
DocumentRoot "C:\AppServ\www\xq"
ServerNamed www.xq.com
ErrorLog "logs/xq-error.log"
CustomLog "logs/xq-access.log" common
</VirtualHost>
讲解
<!DOCTYPE html >
<html lang="en" onselectstart="return false">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
h1 {text-align: center;}
</style>
</head>
<body onselectstart="return false">
<h1>点击显示时间</h1>
<h1 id="txt"></h1>
<script type="text/javascript">
/*
ajax
//现在不存在兼容问题
var xhr = nex XMLHttpRequest();
*/
// 同步
// bind(document,'click',function(){
// //创建xhr对象
// var xhr = new XMLHttpRequest();
// // 准备发送 (类型,后台,同步异步)
// // //同步false.异步true
// xhr.open('get','index.php?rand='+Math.random(),false); //ie
// // xhr.open('get','index.php',false);
// xhr.send(null);
// document.querySelector("#txt").innerHTML = xhr.responseText;
// });
// 异步
bind(document,'click',function(){
//创建xhr对象
var xhr = new XMLHttpRequest();
//异步一定会触发onreadystatechange检测readyState
xhr.onreadystatechange = function(){
// console.log(1);
/*
status ---- 响应HTTP状态码
statusText ---- HTTP状态说明
*/
// console.log(xhr.status+"==="+xhr.statusText);
// 数据接受完成 通过检测readyState的属性
if(xhr.readyState == 4){
// 请求成功
if(xhr.statusText == "OK"){
// 拿到数据responseText
document.querySelector("#txt").innerHTML = xhr.responseText;
// 获取响应头信息 服务器信息 可以获取的但是不可以设置
// alert(xhr.getResponseHeader("Server"));
// alert(xhr.getAllResponseHeaders());//全部头信息
}else{
alert("错误状态码:"+xhr.status+"====错误状态说明"+xhr.statusText);
};
};
};
// 准备发送 (类型,后台,同步异步)
xhr.open('get','index.php?rand='+Math.random(),true); //ie
// xhr.open('get','index.php',false);
// 可以设置请求头信息
xhr.setRequestHeader("user",'weikeduopp');
xhr.setRequestHeader("user-sex",'man');
// 异步需要设置请求头信息 !!!!当要发送数据的时候异步这个必须要设置 不发送的话.写不写都可以.
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求 如果有数据提交就写 没有就不用写
xhr.send(null);
document.querySelector("#txt").innerHTML = xhr.responseText;
});
function bind(obj,eventName,fn){
if(obj.attachEvent){
obj.attachEvent("on"+eventName,fn);
}else{
obj.addEventListener(eventName,function(){
fn.call(obj);
},false);
}
};
// 之前不兼容的
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
// 这只是IE,
var version = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp',
];
for(var i=0;i<version.length;i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
//跳过
}
}
}else{
throw new Error("你的系统或者浏览器不支持XHR对象");
}
};
</script>
</body>
</html>
index.php
<?php
header("Content-Type:text/html;charset=utf-8");
echo date('Y-m-d H:i:s');
//get post
if($_POST['user']=='xq' && $_POST['age']==18)
{
echo "post欢迎回来~~!";
}
else if($_GET['user']=='xq' && $_GET['age'] ==18)
{
echo "get欢迎回来!";
}
?>get post 的发送方式
<!DOCTYPE html >
<html lang="en" onselectstart="return false">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
h1{width: 300px;margin: 30px auto;text-align: center;}
</style>
</head>
<body onselectstart="return false">
<h1>点击显示时间</h1>
<h1 id="txt"></h1>
<script type="text/javascript">
/*
ajax
//现在不存在兼容问题
var xhr = nex XMLHttpRequest();
*/
// 同步
// bind(document,'click',function(){
// //创建xhr对象
// var xhr = new XMLHttpRequest();
// // 准备发送 (类型,后台,同步异步)
// // //同步false.异步true
// xhr.open('get','index.php?rand='+Math.random(),false); //ie
// // xhr.open('get','index.php',false);
// xhr.send(null);
// if(xhr.readyState == 4){
// // 请求成功
// if(xhr.status == 200){
// // 拿到数据responseText
// document.querySelectorAll("h1")[1].innerHTML = xhr.responseText;
// }else{
// alert("错误状态码:"+xhr.status+"====错误状态说明"+xhr.statusText);
// };
// };
// });
// 异步
bind(document,'click',function(){
//创建xhr对象
var xhr = createXHR();
//异步一定会触发onreadystatechange检测readyState
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){//!!!readyState 的S是大写.
// 请求成功
if(xhr.status == 200){
// 拿到数据responseText
document.querySelectorAll("h1")[1].innerHTML = xhr.responseText;
}else{
alert("错误状态码:"+xhr.status+"====错误状态说明"+xhr.statusText);
};
};
};
// 准备发送 (类型,后台,同步异步)
// xhr.open('get','index.php?rand='+Math.random(),true); //ie
xhr.open('get','index.php?user=xq&age=18',true);//get
// xhr.open('post','index.php',true);//post
// 异步需要设置请求头信息 !!!!当要发送数据的时候异步这个必须要设置 不发送的话.写不写都可以.
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//get 提交方式不需要发送数据的
xhr.send(null);
//post 需要发送数据的
// xhr.send('user=xq&age=18');
});
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
var version = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp',
];
for(var i=0;i<version.length;i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
//跳过
}
}
}else{
throw new Error("你的系统或者浏览器不支持XHR对象");
}
};
function bind(obj,eventName,fn){
if(obj.attachEvent){
obj.attachEvent("on"+eventName,function(){
fn.call(obj);
});
}else{
obj.addEventListener(eventName,function(){
fn.call(obj);
},false);
}
};
</script>
</body>
</html>
将拿来的数据处理,添加到页面
person.json文件==>url
[
{
"name":"xq",
"age":18
},
{
"name":"内酷",
"age":18
},
{
"name":"不幽默先生",
"age":18
},
{
"name":"RAMWIRE",
"age":18
},
{
"name":"茅草屋",
"age":18
}
]<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
table {border-collapse: collapse; margin: 50px auto; width: 500px;}
td {text-align: center;}
</style>
</head>
<body>
<table border="1" >
<tr>
<th>name</th>
<th>age</th>
</tr>
<tbody id="box"></tbody>
</table>
<script type="text/javascript">
bind(document,'click',function(){
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if( this.status == 200){
// 拿到数据responseText ==>字符串
var data = JSON.parse(this.responseText);
td(data);//===>处理
}else{
alert("错误状态码:"+xhr.status+"====错误状态说明"+xhr.statusText);
};
};
};
xhr.open('get','person.json',true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(null);
});
var $tbody = document.getElementById("box");
// console.log($tbody.innerHTML);
//数据的处理
function td(json){
// <!-- <tr>
// <td>name</td>
// <td>age</td>
// </tr> -->
for(var i=0;i<json.length;i++){
var param = json[i];
var temp = '';
for(var k in param){
temp += "<td>"+param[k]+"</td>";
};
$tbody.innerHTML += "<tr>"+temp+"</tr>";
};
};
// var tbody = document.getElementById("tbody");
// function td(json){
// for(var i=0;i<json.length;i++){
// var tr = tbody.insertRow(tbody.rows.length);
// var obj = json[i];
// for(var k in obj){
// var td = tr.insertCell(tr.cells.length);
// td.innerText = obj[k];
// };
// };
// };
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
var version = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp',
];
for(var i=0;i<version.length;i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
//跳过
}
}
}else{
throw new Error("你的系统或者浏览器不支持XHR对象");
}
};
function bind(obj,eventName,fn){
if(obj.attachEvent){
obj.attachEvent("on"+eventName,function(){
fn.call(obj);
});
}else{
obj.addEventListener(eventName,function(){
fn.call(obj);
},false);
}
};
</script>
</body>
</html>
封装ajax.js
模型
* ajax({
* method: "get",
* url:'index.php?',
* data:{
* user:name,
* age:18
* },
* success:function(txt){
*
* },
* async: true
* })
/**
*
* @authors weikeduopp
* @date 2017-04-09 02:19:58
* @version $Id$
*
*
* ajax({
* method: "get",
* url:'index.php?',
* data:{
* user:name,
* age:18
* },
* success:function(txt){
*
* },
* async: true
* })
*
*
*
*
*/
function ajax(json){
var xhr = createXHR();
json.data = param(json.data);//数据==>字符
if(json.method === "get"){
json.url += json.url.indexOf("?") == -1?"?"+json.data:json.data; //如果有? .
};
if(json.async === true){ //异步
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if( xhr.status == 200){
//将数据怎么处理
json.success(xhr.responseText);
}else{
alert("错误状态码:"+xhr.status+"====错误状态说明"+xhr.statusText);
};
};
};
}
// 'index.php?user=name&age=18'
xhr.open(json.method,json.url,json.async);
if(json.method === "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(json.data);
}else{
xhr.send(null);
};
if(json.async === false){ //同步
if( xhr.status == 200){
json.success(xhr.responseText);
}else{
alert("错误状态码:"+xhr.status+"====错误状态说明"+xhr.statusText);
};
};
};
function param(data){
var arr = [];
for(var k in data){
// encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
arr.push(encodeURIComponent(k)+"="+encodeURIComponent(data[k]));
}
// user=name&age=18
return arr.join("&");
};
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
var version = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp',
];
for(var i=0;i<version.length;i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
//跳过
}
}
}else{
throw new Error("你的系统或者浏览器不支持XHR对象");
}
};
function bind(obj,eventName,fn){
if(obj.attachEvent){
obj.attachEvent("on"+eventName,function(){
fn.call(obj);
});
}else{
obj.addEventListener(eventName,function(){
fn.call(obj);
},false);
}
};验证.还是用上面index.php
<!DOCTYPE html>
<html lang="en" onselectstart="return false">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}
h1{width: 300px;margin: 30px auto;text-align: center;}
</style>
</head>
<body>
<h1>点击显示</h1>
<h1 id="txt"></h1>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
bind(document,"click",function(){
ajax({
method:'get',
url:'index.php',
//data:{
// 'user':'xq',
// 'age':18
//},
success:function(txt){
document.getElementById("txt").innerHTML = txt;
},
async:false
});
});
</script>
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
