[TOC]
>[success] # ajax工具函数封装
<br/>
ajax函数封装后可以很方便的使用，不需要每次都重新写一遍重复的代码
<br/>
>[success] ## 简单版（post、get函数）
<br/>
简单版需要2个函数：`post` 函数和`get`函数，看着臃肿，里面暂时没有做`数据类型的判断`
<br/>
>[success] ### 前端代码
<br/>
1. index.html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./ajax.js"></script>
<script>
window.onload = function () {
// get请求
document.querySelector('.get').onclick = function () {
get('./backSendData.php', 'name=jack&friend=rose', function (data) {
console.log(data, 'get')
})
}
// post请求
document.querySelector('.post').onclick = function () {
post('./backSendData.php', 'name=jack&friend=rose', function (data) {
console.log(data, 'post')
})
}
}
</script>
</head>
<body>
<h2>测试工具函数</h2>
<input class="get" type="button" value="测试get">
<input class="post" type="button" value="测试post">
</body>
</html>
~~~
2. ajax.js
~~~
/**
* ajax工具函数-get
* @param {*} url
* @param {*} data (key1=value1&key2=value2)
* @param {*} success
*/
function get (url, data, success) {
// 创建异步对象
var xhr = new XMLHttpRequest();
// 请求行
if (data) { // 判断是否有参数没有参数就不拼接?
url += '?';
url += data;
}
xhr.open('get', url)
// 请求头（get可以省略）
// 回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 把接口数据返回到使用该函数处
success(xhr.responseText);
}
}
// 请求主体 发送
xhr.send(null)
}
/**
* ajax工具函数-post
* @param {*} url
* @param {*} data (key1=value1&key2=value2)
* @param {*} success
*/
function post (url, data, success) {
// 创建异步对象
var xhr = new XMLHttpRequest();
// 请求行
xhr.open('post', url);
// 请求头（get可以省略,post不传参数也可以不写）
if (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);
}
~~~
<br/>
>[success] ### 后端代码
<br/>
1. backSendData.php
~~~
<?php
echo '<h2>get</h2>';
print_r($_GET);
echo '<h2>post</h2>';
print_r($_POST);
?>
~~~
<br/>
>[success] ## 改进版（根据参数来决定请求的接口类型）
<br/>
改进后的只需要`一个函数`传入不同的参数即可，缺点：参数必须要有序，顺序不对就会报错，里面暂时没有做`数据类型的判断`
<br/>
>[success] ### 前端代码
<br/>
1. index.html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./ajax.js"></script>
<script>
window.onload = function () {
// 根据参数来决定请求接口类型
document.querySelector('.ajax_test').onclick = function () {
ajax_test('./backSendData.php', 'post', 'name=葫芦娃&food=胡萝卜', function (data) {
console.log(data, 'asda')
})
}
}
</script>
</head>
<body>
<h2>测试工具函数</h2>
<input class="ajax_test" type="button" value="测试ajax_test">
</body>
</html>
~~~
<br/>
2. ajax.js
~~~
/**
* 根据传入的类型来决定请求接口类型
* @param {*} url 接口url
* @param {*} type 请求类型
* @param {*} data 接口参数(key1=value1&key2=value2)
* @param {*} success 回调函数
*/
function ajax_test (url, type, data, success) {
var xhr = new XMLHttpRequest();
// 如果是get,并且有参数才设置
if (type === 'get' && data) {
url += "?";
url += data;
data = null; // 这样最后直接send data即可
}
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);
}
~~~
<br/>
>[success] ## 最终版
<br/>
将`参数`修改为对象的方式易于维护，而且里面做了`数据类型的判断`
<br/>
>[success] ### 前端代码
<br/>
1. index.html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./ajax.js"></script>
<script>
window.onload = function () {
// 只传一个参数
document.querySelector('.ajax').onclick = function () {
ajax({
url: './backSendData.php',
type: 'post',
data: 'name=葫芦娃&food=胡萝卜',
success: function (data) {
console.log(data, 'aoligei')
}
})
}
}
</script>
</head>
<body>
<h2>测试工具函数</h2>
<input class="ajax" type="button" value="测试ajax">
</body>
</html>
~~~
<br/>
2. ajax.js
~~~
/**
* ajax工具函数
* @param {*} option 参数为对象，值为以下内容
* @param {*} url 接口url
* @param {*} type 请求类型
* @param {*} data 接口参数(key1=value1&key2=value2)
* @param {*} success 回调函数
*/
function ajax (option) {
var xhr = new XMLHttpRequest();
// 如果是get,并且有参数才设置
if (option.type === 'get' && option.data) {
option.url += "?";
option.url += option.data;
option.data = null; // 这样最后直接send data即可
}
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) {
var type = xhr.getResponseHeader("Content-Type"); // 获取服务器在header上的信息
if (type.indexOf('json') != -1) { // 判断为json格式信息
option.success(JSON.parse(xhr.responseText))
} else if (type.indexOf('xml') != -1) { // 判断为xml格式信息
option.success(xhr.responseXML)
} else { // 普通字符串
option.success(xhr.responseText)
}
}
}
xhr.send(option.data);
}
~~~
<br/>
>[success] # ajax补充
<br/>
1. 设置返回的数据类型
~~~
'后端'不加'header'情况下，'前端'无法取到'Content-Type'进行条件判断，所以默认返回的数据会是普通
字符串，为了解决这种问题需要设置'responseType'为'json'，如果是'jquery'的'ajax'，设置'dataType'
为'json/xml'等等
~~~
<br/>
2. 跨域
~~~
解决办法：
1. 'CORS'，'html5'支持，低版本浏览器用不了
2. 'JSONP'，在'jquery'中如果'请求跨域的接口'需要设置'dataType'为'jsonp'
~~~
- 基本概念
- 服务器
- PHP学习
- PHP根据数据生成页面
- form表单提交数据到服务器
- form表单查询信息详情页
- 列表渲染展示以及跳转详情
- PHP拆分写法
- form表单提交
- get方式提交数据补充
- post方式提交数据
- post上传文件
- 请求报文和响应报文基本概念
- XMLHTTPRequest对象的基本使用
- 回调函数&获取返回的数据
- ajax发送get请求
- ajax验证用户是否存在逻辑
- ajax发送post请求
- 新浪云使用方法
- onload 和 onreadystatechange
- XML格式
- 服务器返回XML格式数据
- JSON格式
- 服务器返回JSON格式数据
- ajax工具函数封装
- js模板引擎
- 跨域解决方案
- JSONP
- CORS解决跨域
- 下载文件功能