ネイティブ js によって実装された Ajax リクエスト
1. ajax 定義
ajax= Asynchronous JavaScript And XML.
ajax舞台裏で Web サーバーとデータを交換することにより、Web ページの非同期更新を可能にします。これは、ページ全体を再読み込みするのではなく、Web ページの一部を更新できることを意味します。(1)バックエンド サーバーとデータを交換するために使用されるオブジェクトとは
何ですかXMLHttpRequest。最新のブラウザ ( ) にはすべてオブジェクトが組み込まれています。(2)のプロパティ: (3)仕組み: ① Web ページでイベントが発生します (ページの読み込み、ボタンのクリック) ② XMLHttpRequest オブジェクトが JavaScript によって作成されます ③ XMLHttpRequest オブジェクトが Web サーバーにリクエストを送信します④ サーバーリクエストを処理します⑤ サーバーは Web ページに送信されたデータで応答します⑥ JavaScript で応答を読み取ります⑦ JavaScript で正しいアクションを実行します (ページを更新するコードの実行など)
XMLHttpRequestChrom、IE7+、Firefox、Safari以及OperaXMLHttpRequest
XMLHttpRequest
ajax
2. リクエスト
(1) getリクエスト
<!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) get と post をマージし、パラメータ呼び出しを追加する
<!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里面更改即可：
転送リンク: https://blog.csdn.net/dkm123456/article/details/110750062