自己用英文写的笔记，因为输入法切换太麻烦了 ＼(º □ º l|l)/

AJAX

1. Use Nodejs and Express

the basic use of express

// 1. import express
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.get('/',(req, res)=>{// set the responseres.send('I Like Oasis\'s song')
});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

2. AJAX Request

basic operation

express server:

// 1. import express
const { response } = require('express');
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.get('/server',(request,response)=>{// set the response, set to Allow Cross-Origin 允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.send('RadioHead');
});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><style>#result{width: 200px;height: 100px;border: solid 1px #90b;}</style>
</head>
<body><button>Click here to send request</button><div id="result"></div><script>// get the button elementconst btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result')// bind the eventbtn.onclick= function(){// 1. create objectconst xhr = new XMLHttpRequest();// 2. init and set the method and urlxhr.open('GET','http://127.0.0.1:8000/server');// 3. sendxhr.send();// 4. process the result returned from serverxhr.onreadystatechange = function(){// readyState can be 0 1 2 3 4if(xhr.readyState === 4){// identify the status 200 404 403 500 ...// normally the status 200 means a successful requestif(xhr.status >= 200 && xhr.status<300){console.log(xhr.status);  // statusconsole.log(xhr.statusText); // status textconsole.log(xhr.getAllResponseHeaders());console.log(xhr.response);result.innerHTML = xhr.response}}}}</script>
</body>
</html>

get the XMLHttpRequest (xhr) :

const xhr = new XMLHttpRequest();

send post request

server:

// 1. import express
const { response } = require('express');
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.post('/server',(request,response)=>{// set the response, set to Allow Cross-Origin 允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.send('Suede');
});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><style>#result{width: 200px;height: 100px;border: solid 1px #903;}</style>
</head>
<body><div id="result"></div><script>// get the button elementconst result = document.getElementById('result')// bind eventresult.addEventListener('mouseover',function(){// create objectconst xhr = new XMLHttpRequest();// initxhr.open('POST','http://127.0.0.1:8000/server');// sendxhr.send();// bind eventxhr.onreadystatechange = function(){// identify// readyState can be 0 1 2 3 4if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status<300){// processresult.innerHTML = xhr.response}}}})</script>
</body>
</html>

add parameters

  1. get method

directly append ?a=xxx&b=xxx in the end of the url

like

xhr.open('POST','http://127.0.0.1:8000/server?a=xxx&b=xxx');

  1. post method

use:

xhr.send('name=jinondo&pwd=123');

or

xhr.send('name:jinondo&pwd:123');

set request header

......
// init
xhr.open('POST','http://127.0.0.1:8000/server');
// set header messages
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// send
xhr.send('name:jinondo&pwd=123');
......

but if you want to set a custom header messages

you need to add into the server codes:

response.setHeader('Access-Control-Allow-Headers','*');

and change the method to ‘all’

// 3. create route rule
app.all('/server',(request,response)=>{// set the response, set to Allow cross-domain 允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');response.send('Suede');
});

Json data

server：

// 1. import express
const { response } = require('express');
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.get('/json-server',(request,response)=>{// set the response, set to Allow Cross-Origin 允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');let data = {name: 'jinondo'}let str = JSON.stringify(data)response.send(str);
});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><style>#result{width: 200px;height: 100px;border: solid 1px rgb(14, 255, 54);}</style>
</head>
<body><div id="result"></div><script>const result = document.getElementById('result');// bind keydown eventwindow.onkeydown = function(){const xhr = new XMLHttpRequest();console.log('enter');xhr.open('GET','http://127.0.0.1:8000/json-server');xhr.send();xhr.onreadystatechange = function(){// identify// readyState can be 0 1 2 3 4if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status<300){// processlet data = JSON.parse(xhr.response)console.log(data);console.log(data.name);result.innerHTML = data.name;}}}}</script>
</body>
</html>

or

window.onkeydown = function(){const xhr = new XMLHttpRequest();xhr.responseType = 'json'   // ************** set the responseType ****************xhr.open('GET','http://127.0.0.1:8000/json-server');xhr.send();xhr.onreadystatechange = function(){// identify// readyState can be 0 1 2 3 4if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status<300){// processconsole.log(xhr.response);result.innerHTML = xhr.response.name;}}}
}

3. Use nodemon

npm install -g nodemon

start:

nodemon server.js

then you can restart the server without manually restarting

4. IE Cache Problem

solution: append a parameter in the end of the request url

like http://127.0.0.1:8000/ie?t=Data.now()

Data.now() is a timestamp, you can concat the url string in js like:

xhr.open('GET','http://127.0.0.1:8000/ie?t=' + Date.now());

5. Timeout Setting

server:

// 1. import express
const { response } = require('express');
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.get('/delay',(request,response)=>{// set the response, set to Allow cross-domainresponse.setHeader('Access-Control-Allow-Origin','*');// set timeoutsetTimeout(()=>{response.send('delay response');},3000)
});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

html:

......
<body><button>Click here</button><div id="result"></div><script>const btn = document.getElementsByTagName('button')[0]const result = document.getElementById('result');// bind the eventbtn.addEventListener('click',function(){const xhr = new XMLHttpRequest();// set the timeoutxhr.timeout = 2000// if time out, call backxhr.ontimeout = function(){alert('Timeout man! Try it again plz')}// if network error, call backxhr.onerror = function(){alert('Network Error!')}xhr.open('GET','http://127.0.0.1:8000/delay');xhr.send();xhr.onreadystatechange = function(){// identify// readyState can be 0 1 2 3 4if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status<300){// processconsole.log(xhr.response);result.innerHTML = xhr.response;}}}})</script>
</body>

6. Cancel Request

<body><button>Send Request</button><button>Cancel Request</button><script>const btns = document.getElementsByTagName('button');let xhr = null;btns[0].onclick = function(){xhr = new XMLHttpRequest();xhr.open('GET','http://127.0.0.1:8000/delay')xhr.send()}// abort() can cancel the requestbtns[1].onclick = function(){xhr.abort();}</script>
</body>

7. Duplicate Request Sending Problem

<body><button>Send Request</button><script>const btns = document.getElementsByTagName('button');let xhr = null;let isSending = false;btns[0].onclick = function(){// identify the variableif(isSending) xhr.abort();isSending = true;xhr = new XMLHttpRequest();xhr.open('GET','http://127.0.0.1:8000/delay')xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){// change the variable'isSending = false}}}</script>
</body>

8. Jquery Send Ajax

8.1 get and post

server:

// 1. import express
const { response } = require('express');
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.all('/jquery-server',(request,response)=>{// set the response, set to Allow cross-domain 允许跨域response.setHeader('Access-Control-Allow-Origin','*');// response.send('Oasis Wonderwall')const data = {name: 'jinondo'}response.send(JSON.stringify(data))
});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head>
<body><button>Get</button><button>Post</button><button>Common function Ajax</button><script>$('button').eq(0).click(function(){$.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){console.log(data);},'json')})$('button').eq(1).click(function(){$.post('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){console.log(data);})})</script>
</body>
</html>

search https://www.bootcdn.cn/ to add jquery or sth else

8.2 Common function ajax

server

// 1. import express
const { response } = require('express');
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.get('/delay',(request,response)=>{// set the response, set to Allow Cross-Origin 允许跨域response.setHeader('Access-Control-Allow-Origin','*');// set timeoutsetTimeout(()=>{response.send('delay response' + Date.now());},3000)
});app.all('/jquery-server',(request,response)=>{// set the response, set to Allow cross-domain 允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data = {name: 'jinondo'}response.send(JSON.stringify(data))// set timeout// setTimeout(()=>{//     const data = {name: 'jinondo'}//     response.send(JSON.stringify(data))// },3000)// response.send('Oasis Wonderwall')
});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head>
<body><button>Get</button><button>Post</button><button>Common function Ajax</button><script>$('button').eq(2).click(function(){$.ajax({// urlurl: 'http://127.0.0.1:8000/jquery-server',// parameterdata: {a:300,b:400},// typetype: 'GET',// data typedataType: 'json',success: function(data){console.log(data);},timeout:2000,error: function(){console.log('Something wrong happened');},headers: {c: 300,d: 400}})})</script>
</body>
</html>

9. Axios Send Ajax

9.1 get and post

server:

// 1. import express
const { response } = require('express');
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.all('/axios-server',(request,response)=>{// set the response, set to Allow Cross-Originresponse.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data = {name: 'jinondo'}response.send(JSON.stringify(data))});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script></head>
<body><button>Get</button><button>Post</button><button>AJax</button><script>const btns = document.querySelectorAll('button')// set baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000'; btns[0].onclick = function(){// get methodaxios.get('/axios-server',{// url paramsparams: {id: 100,vip: 7},// headersheaders: {name: 'jinondo',age: 20}}).then(value =>{console.log(value);})}btns[1].onclick = function(){// get methodaxios.post('/axios-server',{name:'jinondo',age:1},{// url paramsparams: {id: 100,vip: 7},// headersheaders: {height : 10,weight : 10}}).then(value =>{console.log(value);})}</script>
</body>
</html>

9.2 function axios

server:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script></head>
<body><button>Get</button><button>Post</button><button>AJax</button><script>const btns = document.querySelectorAll('button')// set baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000'; btns[2].onclick = function(){axios({method: 'POST',url: '/axios-server',params: {vip: 10,level: 30},headers: {a: 100,b: 200},data:{username: 'admin',password: '123'}}).then(response=>{console.log(response.status);console.log(response.statusText);})}</script>
</body>
</html>

10. fetch function

// 1. import express
const { response } = require('express');
const express = require('express');// 2. create app object
const app = express();// 3. create route rule
app.all('/fetch-server',(request,response)=>{// set the response, set to Allow Cross-Originresponse.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data = {name: 'jinondo'}response.send(JSON.stringify(data))});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port')
})

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script></head>
<body><button>Ajax</button><script>const btn = document.querySelector('button')btn.onclick = function(){fetch('http://127.0.0.1:8000/fetch-server?vip=10',{method:'POST',headers:{name: 'jinondo'},body: 'username=admin&password=123'}).then(response=>{return response.text();}).then(response=>{console.log(response);});}</script>
</body>
</html>

11. Same Origin Policy

server:

// 1. import express
const express = require('express');// 2. create app object
const app = express();app.get('/home',(request,response)=>{response.sendFile(__dirname + '/test.html');
});app.get('/data',(request,response)=>{response.send('user\'s data');
});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port');
})

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title></head>
<body><h1>Same Origin Policy</h1><button>Same Origin Policy</button><script>const btn = document.querySelector('button')btn.onclick = function(){const xhr = new XMLHttpRequest();// because of the 'Same Origin Policy'// the url can be written simplyxhr.open('GET','/data');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status<300){console.log(xhr.response);}}}}</script>
</body>
</html>

12 Cross-Origin / jsonp

12.1

the html tag can implement cross domain

html标签可实现跨域

For example

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title></head>
<body><script src="http://127.0.0.1:5500/app.js"></script>
</body>
</html>

app.js

const data = {name: 'jinondo'
};console.log(data);

use the live server function in vscode, it will create a ‘Cross-Origin’ resource, like http://127.0.0.1:5500/app.js

so use <script src="http://127.0.0.1:5500/app.js"></script> can also correctly import the js module

And the jsonp make use of the theory like this

12.2

We can do another thing

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><style>#result{width: 200px;height: 100px;border: solid 1px rgb(208, 0, 255);}</style>
</head>
<body><div id="result"></div><script src="http://127.0.0.1:5500/app.js"></script>
</body>
</html>

js:

const data = {name: 'jinondo'
}function handle(data){const result = document.getElementById('result')result.innerHTML = data.name
}handle(data)

Or another way

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><style>#result{width: 200px;height: 100px;border: solid 1px rgb(208, 0, 255);}</style>
</head>
<body><div id="result"></div><script>// handle datafunction handle(data){const result = document.getElementById('result')result.innerHTML = data.name}</script><script src="./app.js"></script>
</body>
</html>

app.js

const data = {name: 'jinondo'
}handle(data)

12.3 jsonp’s principle

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title>
</head>
<body><!-- <script src="./app.js"></script> --><script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

server:

const express = require('express');const app = express();app.all('/jsonp-server',(request,response)=>{// const data = {//     name: 'jinondo'// }// let str = JSON.stringify(data)response.send('console.log("hello jsonp!")')});app.listen(8000,()=>{console.log('server has been started as 8000 port');
})

the point is to return a json form data from Cross-Origin server

just like response.send('console.log("hello jsonp!")')

dont do it like response.send("hello jsonp!")

another example

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><style>#result{width: 200px;height: 100px;border: solid 1px rgb(208, 0, 255);}</style>
</head>
<body><div id="result"></div><script>function handle(data){const result = document.getElementById('result')result.innerHTML = data.name}</script><!-- <script src="./app.js"></script> --><script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

server:

const express = require('express');const app = express();app.all('/jsonp-server',(request,response)=>{const data = {name: 'jinondo'}let str = JSON.stringify(data)response.send(`handle(${str})`)});app.listen(8000,()=>{console.log('server has been started as 8000 port');
})

pay attention to response.send(handle(${str}))

13 Native Jsonp Practice

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title></head>
<body><input type="text" id="username"><p id="error"></p><script>const input = document.getElementById('username')const p = document.getElementById('error')// define the handle functionfunction handle(data){input.style.border = "solid 1px #f00"p.innerHTML = data.msg}// bind eventinput.onblur = function(){// get the input valuelet username = this.value// send request to server to check the exist of username// 1. create script tagconst script = document.createElement('script')// 2. set the attributesscript.src = 'http://127.0.0.1:8000/check-username'// 3. insert the script tag to the filedocument.body.appendChild(script)}</script></body>
</html>

server.js

// 1. import express
const express = require('express');// 2. create app object
const app = express();app.all('/check-username',(request,response)=>{const data = {exist:1,msg: 'username has been existed'}let str = JSON.stringify(data)response.end(`handle(${str})`)});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port');
})

14 Jquery Jsonp Practice

server

// 1. import express
const express = require('express');// 2. create app object
const app = express();app.all('/jquery-jsonp-server',(request,response)=>{const data = {band: 'oasis',song: ['supersonic','wonderwall','stand by me']}let str = JSON.stringify(data)// get the 'callback' parameterlet callback = request.query.callback// callback is a functionresponse.end(`${callback}(${str})`)});// 4. listen port and start the server
app.listen(8000,()=>{console.log('server has been started as 8000 port');
})

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>#result{width: 300px;height: 100px;border: solid 1px rgb(0, 89, 255);}</style>
</head>
<body><button>Send Jsonp request</button><div id="result"></div><script>$('button').eq(0).click(function(){$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){$('#result').html(`band: ${data.band}<br>song: ${data.song}`)// $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){//     console.log(data);// })})})</script></body>
</html>

the significant point is the callback parameter,

for my perspective, that is like a function name, and it will be called and return the data from Cross-Origin server

15 CORS (Cross-Origin Resource Sharing)

Something headers message to set for CORS:

// CORS
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
response.setHeader('Access-Control-Allow-Method','*');

example:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>#result{width: 300px;height: 100px;border: solid 1px rgb(0, 89, 255);}</style>
</head>
<body><button>Click here to send request</button><div id="result"></div><script>const btn = document.querySelector('button');const result = document.getElementById('result')btn.onclick= function(){const xhr = new XMLHttpRequest();xhr.open('GET','http://127.0.0.1:8000/server');xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status<300){result.innerHTML = xhr.response}}}}</script></body>
</html>

const express = require('express');const app = express();app.get('/server',(request,response)=>{// CORSresponse.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');response.setHeader('Access-Control-Allow-Method','*');response.send('The End of The Fxxking World');
});app.listen(8000,()=>{console.log('server has been started as 8000 port');
})

Conclusion:

Before we didnt meet the CORS error, because we add the setHeaders functions in the server route.

But what makes me confused is that if i didn’t add the setHeaders function, i will get the data too…

Finally I found the problem,

is that

The Cache of Chrome Browser!

So just reference the No.4 of this note article

Use xhr.open('GET','http://127.0.0.1:8000/server?t=' + Date.now());

AJAX 笔记 ajax相关推荐

  1. ExtJs4 笔记（3） Ext.Ajax 对ajax的支持

    原文地址为: ExtJs4 笔记(3) Ext.Ajax 对ajax的支持 <回到系列目录 本篇主要介绍一下ExtJs常用的几个对JS语法的扩展支持,包括Ajax封装,函数事件操作封装,还有扩展 ...

  2. 一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）

    第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...

  3. Java Script 学习笔记 -- Ajax

    AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...

  4. 前端学习笔记——Ajax

    URL地址 URL地址的概念 URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置,浏览器只有通过URL地址,才能正确定位资源 ...

  5. 【AJAX 笔记】AJAX 基本、HTTP 基本、原生 AJAX 的使用，jQuery / Axios / fetch 发送请求、跨域（JSONP/CORS）

    文章目录 1 Ajax 概述 1.1 AJAX 简介 1.2 XML 简介 1.3 AJAX 的特点 1.3.1 AJAX 的优点 1.3.2 AJAX 的缺点 1.4 AJAX 属性和方法 2. H ...

  6. 怎么中断一个ajax请求,ajax、fetch、axios如何中断请求？

    先来说一说"中断请求"的实际场景,当页面有多个tab页签时,每次切换页签都会去请求数据,频繁的切换就会去请求很多次,比如A页签切换到B页签,A页签请求完全是不必要的,这时候可以在切 ...

  7. ajax入门实例代码,AJAX、AJAX实例及AJAX源代码

    AJAX.AJAX实例及AJAX源代码 作者:佚名 来源:CNZZ 2008-1-4 AJAX介绍 AJAX 关键词: JavaScript脚本和可扩展标记语言(XML) WEB浏览器技术 开放式WE ...

  8. 六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求

    @Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...

  9. $.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)

    一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...

最新文章

  1. JavaScript基础初始时期分支（018）
  2. TSC的分歧导致Node.js分支
  3. 【QQ输入法】QQ输入法-剪切板 释放内存
  4. Makefile之静态模式（7）
  5. Ubuntu 12/14 个性化配置
  6. Kafka简介与消息队列
  7. python获取当前网页元素_python – 如何获取webdriver中元素的当前内容
  8. cakephp 同时挂两个数据库
  9. 春节怎么抢红包，python一招告诉你再也不会错过微信红包
  10. 音频系统POP音的原理和解决方法
  11. 【5G核心网】5GC核心网之网元NSSF
  12. 并发编程-基础篇五-ThreadLocal
  13. jQuery源码分析理解
  14. Life Restart 人生模拟器 网址
  15. Button 点击没有反应
  16. AudioKit 教程：入门
  17. 数据中心管理与运维的问题与对策
  18. Oracle篇--04 Oracle SQL高级查询、分页查询
  19. 安卓Android sqllite实现保存数据和读数据
  20. 数组、链表、队列、栈数据结构特点，各自优点和缺点

热门文章

  1. 花式宠妈：这个母亲节，带妈妈逛银泰
  2. 下一个风口：机器人--工业/农业4.0（李泽湘演讲笔记）
  3. 2007-2020年上市公司商誉减值损失数据
  4. 2021年国内CRM软件排名参考
  5. 省国税局关于营改增相关问题的解答（二）
  6. 如今传统企业如何做数字化转型？
  7. 双十一电商行业数据分析
  8. 计算机安装网络打印机,怎么安装网络打印机 网络打印机安装详细教程【图文】...
  9. SpringBoot系统搭建集成-007-集成Redis
  10. vue项目中使用echarts和china.js实现中国地图