原生AJAX
名称： 异步的javascript and xml
原理：
- 通过XMLHttpRequest与服务器交换数据
- 服务器数据通过json或者xml格式返回
- 浏览器通过js+css渲染展示数据
GET
- 创建xhr
- open打开连接
- 监听readystate readyState 4准备状态完毕 status 状态码200 响应成功
- send 发送
<button id="btn">点击</button>
<p id="content"></p>
<script type="text/javascript">
var btn=document.querySelector('button');
var content=document.querySelector('p');
btn.onclick=function(){
var xhr = new XMLHttpRequest();
xhr.open('GET','./be.text',false);
xhr.onreadystatechange = function(){
if(xhr.status ==200&&xhr.readyState==4){
content.innerHTML = xhr.responseText;
}
}
xhr.send();
}
</script>
be.text内容
我爱ajax
POST
- 创建xhr
- open打开连接
- 设置头信息(get省略)
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’); - 监听readystate readyState 4准备状态完毕 status 状态码200 响应成功
- send 发送
<input type="text" name='name' id="name" />
<input type="text" name='age' id="age" />
<button id="btn">点击</button>
<p id="content"></p>
<script type="text/javascript">
var btn=document.querySelector('button');
var content=document.querySelector('p');
var name = document.querySelector('button').value;
var age = document.querySelector('button').value;
btn.onclick=function(){
var xhr = new XMLHttpRequest();
xhr.open('POST','https://520mg.com/ajax/echo.php',false);
xhr.onreadystatechange = function(){
if(xhr.status ==200&&xhr.readyState==4){
content.innerHTML = xhr.responseText;
}
}
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(`name=${
name}&age=${
age}`);
}
</script>
JQuery中的ajax
分为3层
- 第一层：$.ajax()
- 第二层：$.get() $.post()
- 第三层：$.getJSON() $.getScript() load()
注意：以下需要引入JQuery
$.ajax()
<script type="text/javascript">
var index = 1
// 异步加载
function AJAX(index=1){
// 1. 创建一个 XMLHttpRequest 对象
var req = new XMLHttpRequest();
// 2. 打开链接
req.open('GET',`https://api.apiopen.top/getJoke?page=${
index}&count=10&type=video`,true)
// 3. 建立事件监听
req.onreadystatechange=function(){
if(req.readyState==4&&req.status==200){
let temp = JSON.parse(req.response);
console.log(temp)
for(let i of temp.result){
for(let j in i){
if(j=='video'){
console.log(i[j])
var vi = document.createElement('video')
vi.src = i[j];
vi.width=300;
vi.controls='true'
var p = document.createElement('p')
p.appendChild(vi)
document.body.appendChild(p)
}
}
}
}
}
// 4. 发送
req.send()
}
AJAX(index)
window.onscroll=function(e){
if(document.documentElement.scrollHeight-window.innerHeight==document.documentElement.scrollTop){
console.log('抵达末尾')
index++
AJAX(index)
}
}
</script>
$.get()
<script>
$(function(){
$('button').click(function(){
$.get('./be.text',function(data,status){
if(status=="success"){
$('.con').text(data);
}
})
})
})
</script>
<button>get</button>
<div class="con"></div>
<script>
$(function(){
$('button').click(function(){
$.get('./be.text')
.done(res=>{
//成功
$(".con").text(res);
})
.fail(err=>{
//失败
console.log(err);
})
.always(xhr=>{
//总是
console.log("成功失败都执行",xhr);
})
})
})
<button>get</button>
<div class="con"></div>
<script>
$(function(){
$('button').click(function(){
$.get('./be.text')
.then(res=>{
$(".con").text(res);
})
.catch(err=>{
console.log(err);
})
})
})
</script>
任意jq的ajax 都可以有这几种方式
-
回调函数形式 $.get(url,function(){})
-
Promise done() fail() always()
-
Promise then() catch()
$.post()
<input type="text" id="name">
<input type="text" id="age">
<button>发送</button>
<div class="con"></div>
<script>
$(function(){
$('button').click(function(){
var name = $('#name').val();
var age = $('#age').val();
// var data = {name,age};
$.post('https://www.520mg.com/ajax/echo.php',`name=${
name}&age=${
age}`)
.then(res=>{
$(".con").text(res);
})
.catch(err=>{
console.log(err);
})
})
})
</script>
$.getScript()
<button>getScript</button>
<div class="con"></div>
<script>
$(function(){
$('button').click(function(){
$.getScript('./script.js');
})
})
</script>
$.getJSON()
<button>getJSON</button>
<div class="con"></div>
<script>
$(function(){
$('button').click(function(){
$.getJSON("./be.json",function(data,status,xhr){
console.log(data,status,xhr);
//data be.json里面的数据
//status 状态 success成功
//xhr 封装好的jquery xhr对象
//JSON.stringify 把js对象转换成字符串
$('.con').text(JSON.stringify(data));
})
})
})
</script>
load()
<button>加载</button>
<div class="con"></div>
<script>
$(function(){
$('button').click(function(){
$('.con').load("./be.html");
})
})
</script>
要学会ajax还得要知道跨域相关知识
1. 同源策略
当浏览器去访问服务器资源（ajax） 要求服务器的地址与浏览器同源,即协议，域名，子域名，端口号要一致。
2. 跨域
绕过浏览器的同源策略，请求到数据
跨域方式列举一下常用的3种
- 服务器响应头信息跨域
Access-Control-Allow-Origin: * - jsonp跨域
- 服务器代理（开发）
3. 异步，同步
同步：阻塞代码执行
异步：代码同时执行，不会阻塞代码
4.url地址的组成
例如：https:www.520mg.com:443/ajax/echo.php?name=mumu&age=18#cate
https 协议
www子域名
*520mg.com 域名
:443 端口号
/ajax/echo.php 路径
?name=mumu&age=18 查询条件
#cate 哈希值*