ajax
一、概述
1.定义
2.异步与同步
二、XMLHttpRequest
浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。
<!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>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax</h1>
<p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
//本质: 是在HTTP协议的基础上通过js的XMLHttpRequest对象与服务器进行通信。
document.querySelector('button').onclick = function () {
//1-创建一个XMLhttpRequest实例
// var date = new Date();
var xhr = new XMLHttpRequest();
//2-把请求报文设置好
// 2-1请求行
xhr.open('get', './01-ajax.php');
// 2-2请求头
xhr.setRequestHeader('content-type', 'text/html');
// 2-3请求主体
//get请求报文没有请求主体 ,发送null
xhr.send(null);
//3-接受服务器响应内容
// 服务器何时响应，是不确定，会受到各种外界因素影响， 所有以一直等待服务器响应；用事件监听
//监听XMLHttpRequest的状态 变化
// readyState == 4 表示服务器响应完成
xhr.onreadystatechange = function () {
// 如果服务器响应完成 并且 成功处理请求，则获取数据
if (xhr.readyState == 4 && xhr.status == 200) {
//获取服务器响应的结果（获取响应主体中的数据）
var r = xhr.responseText;
console.log(r);
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
</html>
1.发送get请求
<!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>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax - get</h1>
<p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
//点击按钮，获取输入框的值，通过ajax发送给后台
document.querySelector('button').onclick = function () {
var txt = document.querySelector('input').value;
//利用ajax发送数据给后台
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('get', './02-ajax-get.php?name='+txt);
//2-2请求头
xhr.setRequestHeader('content-type', 'text/html');
//2-3请求主体
xhr.send(null);
//3-监听服务器响应
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
//显示
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
</html>
2.发送post请求
<!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>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax - post</h1>
<p>可以在页面不刷新的情况下，请求服务器，局部更新页面的数据；</p>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
//点击按钮，获取输入框的值，通过ajax发送给后台
document.querySelector('button').onclick = function () {
var txt = document.querySelector('input').value;
//利用ajax向数据发送给后台
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('post', './03-ajax-post.php');
//2-2请求头
//必须设置content-type属性
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//2-3请求主体
xhr.send('name=' + txt+'&sex=m');
//3-监听服务器响应
xhr.onreadystatechange = function () {
if (xhr.readyState ==4 && xhr.status == 200) {
var r = xhr.responseText;
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
</html>
3.获取响应
4.案例
聊天机器人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
h3 {
text-align: center;
}
.chatbox {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #CCC;
background-color: #FFF;
border-radius: 5px;
}
.messages {
height: 350px;
padding: 20px 40px;
box-sizing: border-box;
border-bottom: 1px solid #CCC;
overflow: scroll;
}
.messages h5 {
font-size: 20px;
margin: 10px 0;
}
.messages p {
font-size: 18px;
margin: 0;
}
.self {
text-align: left;
}
.other {
text-align: right;
}
.form {
height: 150px;
}
.form .input {
height: 110px;
padding: 10px;
box-sizing: border-box;
}
.form .btn {
height: 40px;
box-sizing: border-box;
border-top: 1px solid #CCC;
}
.form textarea {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border: none;
resize: none;
outline: none;
font-size: 20px;
}
.form input {
display: block;
width: 100px;
height: 30px;
margin-top: 5px;
margin-right: 20px;
float: right;
}
</style>
</head>
<body>
<h3>简单的Ajax实例</h3>
<div class="chatbox">
<!-- 聊天内容 -->
<div class="messages">
<!-- <div class="self">
<h5>我说</h5>
<p>你好</p>
</div>
<div class="other">
<h5>对方说</h5>
<p>你好</p>
</div> -->
</div>
<!-- 表单 -->
<div class="form">
<!-- 输入框 -->
<div class="input">
<textarea></textarea>
</div>
<!-- 按钮 -->
<div class="btn">
<input type="button" value="发送">
</div>
</div>
</div>
<!-- 这个先忽略，春哥说的 -->
<script type="text/template">
<div class="self">
<h5>我说</h5>
<p>你好</p>
</div>
<div class="other">
<h5>对方说</h5>
<p>你好</p>
</div>
</script>
<script>
//聊天案例思路
// 1-点击发送按钮，获取输入框的值，添加到消息窗口中
// 2-将聊天内容发送给服务器， 接受服务器返回的消息
// 3-将服务器返回的内容，添加到消息窗口中
var messages = document.querySelector('.messages');
var textarea = document.querySelector('textarea');
//1-给发送按钮绑定点击事件
document.querySelector('input').onclick = function () {
//获取输入框的值
var txt = textarea.value;
// alert(txt);
//添加到消息窗口中
messages.appendChild( setMsg('self', txt) );
//清空输入框
textarea.value = '';
//将聊天内容发送给服务器， 接受服务器返回的消息
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('post', './chat.php');
//2-2请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//2-3请求主体
xhr.send('msg=' + txt);
//3-监听服务器响应
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText; //获取服务器返回 的结果
console.log(r);
//把消息先包装，在添加在messages
messages.appendChild( setMsg('other', r) );
}
}
}
//生成消息
// flag : 谁说的 self other
// msg: 聊天内容
function setMsg(flag, msg) {
//先报消息进行包装
var div = document.createElement('div');
var h5 = document.createElement('h5');
var p = document.createElement('p');
//设置样式和内容
if (flag == 'self') {
div.className = 'self';
h5.innerHTML = '我说：';
} else {
div.className = 'other';
h5.innerHTML = '对方说：';
}
p.innerHTML = msg;
//建立父子关系
div.appendChild(h5);
div.appendChild(p);
return div; //把拼接好结构返回
}
</script>
</body>
</html>
三、数据交互
1.XML
什么是XML
语法规范
php获取xml文件的内容
html解析xml
2.JSON数据
php处理json
JS处理json
四、兼容性处理
五、封装ajax工具函数
完整代码
var $={
ajax:function(obj){
//获取用户的参数
var type=obj.type||'get'; //默认请求方式是get
var url=obj.url||location.href; //默认请求当前页面
var callback=obj.callback;
//1-js中使用对最方便接受的参数是对象，但是传递给服务器的格式 name=zs&age=18
var data=this.setParam(obj.data); //name=zs&age=18
// console.log(data);
//封装ajax公共代码部分
//1-创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
//模拟http协议
//如果是get请求在url后面拼接参数
if(type=='get'){
url=url+'?'+data;
data=null;
}
//1-请求行
xhr.open(type,url);
//2-请求头 post 必须设置请求头
if(type=='post'){
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
}
//3-请求主体
xhr.send(data);
//监听服务器的响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4 &&xhr.status==200){
var r=xhr.responseText;//获取响应主体
//r中就是服务器返回核心数据 需要渲染
callback&&callback(r);
}
}
},
//将对象转成 name=zs&age=18
setParam:function(obj){
if(typeof obj =='object'){
var str='';
for(var k in obj){
str+=k+'='+obj[k]+'&';
}
str=str.substr(0,str.length-1); //参数一：开始索引 参数二：截取长度
}
return str;//返回转换后的字符串
}
};
六、jQuery中的ajax方法
jQuery为我们提供了更强大的Ajax封装
1.$.ajax
2.其他api
3.接口化开发
七、模板引擎
是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
1.为什么要使用模板引擎
2.常见的模板引擎
3.artTemplate的使用
artTemplate入门
artTemplate语法
八、同源与跨域
1.同源
不同源 则跨域
同源策略的基本概念
同源策略的目的
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据
同源策略的限制范围
2.跨域
jsonp
jsonp演化过程
jsonp原理大家知道即可，不用太过于去纠结这个原理，因此jquery已经帮我们封装好了，我们使用起来非常的方便
jquery对于jsonp的封装
九、XMLHttpRequest 2.0
1.timeout设置超时
2.formData管理表单数据
3.文件上传
4.显示文件进度信息
十、跨域资源共享(CORS)
1.cors的使用
2.CORS的具体流程
3.其他的跨域手段
4.虚拟主机配置
