Requête Ajax implémentée par js natif
1. ajax definition
ajax = Asynchronous JavaScript And XML.Permet
ajaxla mise à jour asynchrone des pages Web en échangeant des données avec le serveur Web en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour au lieu de recharger la page entière.
(1) Qu'est-ceXMLHttpRequest
XMLHttpRequest qu'un objet utilisé pour échanger des données avec le serveur backend ? Tous les navigateurs modernes ( Chrom、IE7+、Firefox、Safari以及Opera) ont des objets intégrés XMLHttpRequest. Propriétés de
(2) : XMLHttpRequest
(3) ajaxComment ça marche :
① Un événement se produit dans la page web (chargement de la page, clic sur un bouton)
② L'objet XMLHttpRequest est créé par JavaScript ③
L'objet XMLHttpRequest envoie une requête au serveur web
④ Le serveur traite la demande
⑤ Le serveur répond avec les données envoyées à la page Web
⑥ Lisez la réponse par JavaScript
⑦ Effectuez l'action correcte par JavaScript (comme exécuter du code pour mettre à jour la page)
2. Demande
(1) obtenir la demande
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body>
<p id="txt"></p>
<button onclick="do_get()">获取数据</button>
</body>
<script>
function getXhr(){
if (window.XMLHttpRequest) {
// 用于现代浏览器的代码
xmlhttp = new XMLHttpRequest();
} else {
// 应对老版本 IE 浏览器的代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function get(url,async){
var xhr = getXhr();
xhr.open('GET',url,async);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState ===4){
var text ;
if(xhr.status === 200){
text=xhr.responseText;
}else{
text='获取失败';
}
callback(text);
}
}
}
function callback(text){
document.getElementById("txt").innerText=text;
}
function do_get(){
get("ajax_test.txt",true);
}
</script>
</html>
```
（2）post请求
```javascript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body>
<p id="txt"></p>
<button onclick="do_post()">获取数据</button>
</body>
<script>
function getXhr(){
if (window.XMLHttpRequest) {
// 用于现代浏览器的代码
xmlhttp = new XMLHttpRequest();
} else {
// 应对老版本 IE 浏览器的代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function get(url,async){
var xhr = getXhr();
xhr.open('GET',url,async);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState ===4){
var text ;
if(xhr.status === 200){
text=xhr.responseText;
}else{
text='获取失败';
}
callback(text);
}
}
}
function post(url,async){
var xhr = getXhr();
xhr.open('POST',url,async);
//post需加上这句，不然报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState ===4){
var text ;
if(xhr.status === 200){
text=xhr.responseText;
}else{
text='获取失败';
}
callback("POST "+text);
}
}
}
function callback(text){
document.getElementById("txt").innerText=text;
}
function do_get(){
get("ajax_test.txt",true);
}
function do_post(){
post("ajax_test.txt",true);
}
</script>
</html>
(3) Fusionner get et post et ajouter des appels de paramètres
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body>
<p id="txt"></p>
<button onclick="do_ajax()">获取数据</button>
</body>
<script>
function _doAjax(option){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject('Microsoft.XMLHTTP');
if(!xhr){
throw new Error('不支持发起http请求！');
}
var opt = option || {
},
url = opt.url,
async = opt.async ,
type = (opt.type || 'GET').toUpperCase(),
data = opt.data || {
};
if(typeof async === 'undefined'){
async = true ;//如果跨域，这个参数用false不行
}
if(!url){
throw new Error('请填写url!');
}
xhr.open(type,url,async);
type === 'POST' && xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(type === 'GET'?null : formatData(data));
xhr.onreadystatechange=function(){
if(xhr.readyState ===4){
if(xhr.status === 200){
cb(type+" "+xhr.responseText,'suc');
}else{
cb(type+" "+xhr.responseText,'fail');
}
}
}
function formatData(data){
var rData='';
for(var key in data){
rData += key + '=' + data[key] + '&';
}
return rData.replace(/&$/,'');
}
}
function cb(text,result){
document.getElementById("txt").innerText=text;
}
function do_ajax(){
var option = {
url:'ajax_test.txt',
type:'get',
async:true,
data:{
}
}
_doAjax(option);
}
</script>
</html>
若需要修改调用的方式或者传入的参数 ，只需要在option里面更改即可：
Lien suivant : https://blog.csdn.net/dkm123456/article/details/110750062