目录
@L_404_2@
一、封装过程解析
二、get封装
三、post封装
四、post和get封装的合并
4.1、第一种封装方式
/*
键名
url
type
data
success
*/
function ajax_test(url,type,data,success){
//创建对象
var xhr = new XMLHttpRequest();
//请求头
if(type=='get' && data){//如果是get并且有数据
url+='?';//url=url+'?'
url+=data;//url=url+data
//send()请求体传输data,
data=null;
}
//请求行
xhr.open(type,url);
//post请求 并且有数据
if(type=='post' && data){
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
}
//回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
success(xhr.responseText);
}
}
//请求体
xhr.send(data);
4.2、第二中封装方式
传递一个参数的ajax 封装 大多数的框架的都是这样封装的
/*键名： url type data success */
function ajax(option){
//创建对象
var xhr = new XMLHttpRequest();
if(option.type=='get' && option.data){//如果是get并且有数据
option.url+='?';//url=url+'?'
option.url+=option.data;//url=url+data
//send()请求体传输data,
option.data=null;
}
//请求行
xhr.open(option.type,option.url);
//post请求 并且有数据
if(option.type=='post' && option.data){
//请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
}
//回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
option.success(xhr.responseText);
var type = xhr.getResponseHeader('Content-Type');
//是否为json
if(type.indexOf('json')!=-1){
option.success(JSON.parse(xhr.responseText));
}
//普通字符串
else if(type.indexOf('xml') !=-1){
option.succuss(xhr.responseXML);
}
//两者都不是
else{
option.success(xhr.responseText);
}
}
}
//请求体
xhr.send(option.data);
}
function ajax(option){
//创建对象
var xhr = new XMLHttpRequest();
//请求头
if(option.type=='get' && option.data){//如果是get并且有数据
option.url+='?';//url=url+'?'
option.url+=option.data;//url=url+data
//send()请求体传输data,
option.data=null;
}
//请求行
xhr.open(option.type,option.url);
//post请求 并且有数据
if(option.type=='post' && option.data){
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
}
//回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
option.success(xhr.responseText);
}
}
//请求体
xhr.send(option.data);
}
五、练习
ajax之json接口在线测试(在线 JSONP 接口测试简爱):http://api.asilu.com/#geo
5.1练习一
html页面
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="合并post与get" />
</body>
</html>
<script src="js/ajax.js"></script>
<script>
document.querySelector('input').onclick =function(){
ajax_test('data.PHP','get','name=张三&food=白菜',function(data){
alert('张三');
alert(data);
})
}
</script>
封装的ajax
function ajax_test(url,type,data,success){
//创建对象
var xhr = new XMLHttpRequest();
//请求头
if(type=='get' && data){//如果是get并且有数据
url+='?';//url=url+'?'
url+=data;//url=url+data
//send()请求体传输data,
data=null;
}
//请求行
xhr.open(type,url);
//post请求 并且有数据
if(type=='post' && data){
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
}
//回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
success(xhr.responseText);
}
}
//请求体
xhr.send(data);
}
<?PHP
//原封不动的返回发过来的数据
echo '<h2>get</h2>';
print_r($_GET);
echo '<h2>post</h2>';
print_r($_POST);
?>
5.2练习二
html页面(index.xml)
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="获取json" class="json"/>
<input type="button" value="获取xml" class="xml"/>
</body>
</html>
<script src="js/ajax.1.js"></script>
<script>
document.querySelector('.json').onclick = function(){
ajax({
url:'./backjson.PHP',
type:'get',
success:function(data){
console.log(data);
}
});
}
document.querySelector('.xml').onclick =function(){
ajax({
url:'./backxml.PHP',
type:'get',
success:function(data){
console.log(data);
}
});
}
</script>
<?PHP
//设置返回的JSON
header('content-type:application/xml;charset=utf-8');
//读取数据并返回
echo file_get_contents('./person.xml');
?>
<?PHP
//设置返回的JSON
header('content-type:application/json;charset=utf-8');
//读取数据并返回
echo file_get_contents('./person.json');
?>
xml页面 (person.xml)
?xml version="1.0" encoding="utf-8">
<person>
<skill>张三</skill>
<name>钢笔字</name>
</person>
json页面
{
"skill":"炒菜",
"name":"赵六"
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
