前端使用ajax_ajax属于前端吗

2022-11-11 14:35:53 浏览数 (1)

大家好，又见面了，我是你们的朋友全栈君。

原生AJAX

名称： 异步的javascript and xml

原理：

  • 通过XMLHttpRequest与服务器交换数据
  • 服务器数据通过json或者xml格式返回
  • 浏览器通过js css渲染展示数据

GET

  1. 创建xhr
  2. open打开连接
  3. 监听readystate readyState 4准备状态完毕 status 状态码200 响应成功
  4. send 发送
代码语言：javascript复制
<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内容

代码语言：javascript复制
我爱ajax

POST

  1. 创建xhr
  2. open打开连接
  3. 设置头信息(get省略) xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
  4. 监听readystate readyState 4准备状态完毕 status 状态码200 响应成功
  5. send 发送
代码语言：javascript复制
<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()

代码语言：javascript复制
<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()

代码语言：javascript复制
 <script>
$(function(){ 

$('button').click(function(){ 

$.get('./be.text',function(data,status){ 

if(status=="success"){ 

$('.con').text(data);
}
})
})
})
</script>
代码语言：javascript复制
 <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);
})
})
})
代码语言：javascript复制
 <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 都可以有这几种方式

  1. 回调函数形式 $.get(url,function(){})
  2. Promise done() fail() always()
  3. Promise then() catch()

$.post()

代码语言：javascript复制
 <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()

代码语言：javascript复制
<button>getScript</button>
<div class="con"></div>
<script>
$(function(){ 

$('button').click(function(){ 

$.getScript('./script.js');
})
})
</script>

$.getJSON()

代码语言：javascript复制
<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()

代码语言：javascript复制
 <button>加载</button>
<div class="con"></div>
<script>
$(function(){ 

$('button').click(function(){ 

$('.con').load("./be.html");
})
})
</script>

要学会ajax还得要知道跨域相关知识

1. 同源策略

代码语言：javascript复制
当浏览器去访问服务器资源（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 哈希值*

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/187702.html原文链接：https://javaforall.cn

ajax https 网络安全 jquery php

0 人点赞