提示:本文是我跟随老师封装的一个简易的ajax,可以大致了解到Ajax的工作原理
Ajax的工作原理 :
当你在网页上点击按钮或者提交表单时,通常会触发一个事件,比如JavaScript函数。在Ajax中,当这个事件触发时,JavaScript会创建一个XMLHttpRequest对象。这个对象是用来和服务器进行通信的。然后,JavaScript通过这个对象发送HTTP请求到服务器,请求特定的资源或者数据。
一旦服务器收到了这个请求,它会处理这个请求,可能是从数据库中检索数据或者执行其他操作,然后将结果返回给浏览器。
浏览器接收到服务器返回的数据后,JavaScript会解析这个数据,然后根据需要更新页面的内容。这个过程是异步的,也就是说,在等待服务器响应的过程中,用户可以继续与页面交互。
代码:
<!DOCTYPE html>
<html lang="zh-cn">
<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>基本模板</title>
<style></style>
</head>
<body>
<h3 class="msg"></h3>
<script>
// 定义$$对象
var $$ = {};
// 把这个对象
// {appid:76991983,appsecret:"KcQs38fI",unescape:1, city: "漠河"}
// 转成以下格式的字符串
// appid=76991983&appsecret=KcQs38fI&unescape=1&city=漠河
// 添加方法
$$.ajax = function (option) {
// 定义变量记录ajax相关的参数
var url = option.url;
var type = option.type || 'get';
var async = option.async === undefined ? true : option.async;
var data = option.data;
var str = '';
if (data) {
for (var key in data) {
str += key + "=" + data[key] + "&"
}
// 删除最后一个字符&
str = str.slice(0, str.length - 1);
}
// 判断是执行同源策略的代码
// ajax
// 使用ajax四个步骤
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 1) {
// 请求之前
option.beforeSend && option.beforeSend();
}
// 判断请求完成
if (xhr.readyState === 4) {
// 判断是否响应成功
if (xhr.status === 200) {
// 表示响应成功
// var content = xhr.responseText;
option.success && option.success(xhr.responseText);
}
else {
// 表示响应成功
option.error && option.error(xhr.responseText);
}
// 请求完成
option.complete && option.complete();
}
}
// 判断请求是get方式,还是其他方式post
if (type == "get" && str) {
// get 请求方式,需要把数据拼接在接口地址尾部
url = url + "?" + str;
}
xhr.open(type, url, async);
// 判断用户请求是post 设置一下请求头
if (type == "post") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
// post 方式请求,需要在send(数据)
xhr.send(type == 'get' ? null : str);
}
//调用我封装的ajax函数
$$.ajax({
url: '03_data.txt',// 数据地址/文档地址/接口地址
type: 'get',// 请求方式
success: function (content) {// 请求成功执行的回调函数
// 如果这个content本身就是一个对象,就不需要parse解析了
var obj = JSON.parse(content);
console.log("obj:", obj);
// 渲染数据
document.querySelector(".msg").innerHTML = obj.message;
},
error: function (err) {
console.log(err)
}
})
// 天气接口
// http://v1.yiketianqi.com/free/day?appid=你的账号信息&appsecret=你的账号信息&unescape=1&city=%E6%BC%A0%E6%B2%B3
$$.ajax({
url: 'http://v1.yiketianqi.com/free/day',// 数据地址/文档地址/接口地址
type: 'get',// 请求方式
data: {
appid: "你的账号信息",
appsecret: "你的账号信息",
unescape: 1,
city: "漠河"
},
success: function (content) {// 请求成功执行的回调函数
// 如果这个content本身就是一个对象,就不需要parse解析了
var obj = JSON.parse(content);
console.log(obj);
},
error: function (err) {
console.log(err)
}
})
</script>
</body>
</html>