Ajax的實作步驟

1.創建Ajax物件

var xhr = new XMLHttpRequest();

2.告訴Ajax請求地址以及請求方式

xhr.open('get','http://www.example.com');

3.發送請求

xhr.send();

4.獲取服務器端給與客戶端的相應資料

xhr.onload = function () {
	console.log (xhr.responseText);
}

5.example

<script type=" text/javascript">
// 1.創建ajax物件
var xhr = new XMLHttpRequest();
//2.告訴Ajax物件要向哪發送請求，以什么方式發送請求
//1)請求方式2)請求地址
xhr.open('get','http://localhost:3000/first');
// 3.發送請求
xhr.send();
//4.獲取服務器端回應到客戶端的資料
xhr.onload = function (){
	console.log(xhr.responseText);
}
</script>

服務器端回應

框架

//引入express框架
const express = require('express');
//路徑處理模塊
const path = require('path');
//創建web服務器
const app = express();
//靜態資源訪問服務功能
app.use(express.static(path.join(__dirname,'public')));
//監聽埠
app.listen(3000);
//控制臺提示輸出
console.log('服務器啟動成功');

處理服務器端回傳的JSON資料

//引入express框架
const express = require('express');
//路徑處理模塊
const path = require('path');
//創建web服務器
const app = express();
//靜態資源訪問服務功能
app.use(express.static(path.join(__dirname,'public')));
//對應01html檔案
app.get('/first',(req,res) => {
	res.send('Hel1o, Ajax');
});
app.get('/responseData',(req,res) => {
	res.send({"name":"zs"});
});
//監聽埠
app.listen(3000);
//控制臺提示輸出
console.log('服務器啟動成功');

xhr.onload = function (){
    //此時控制臺輸出的是字串型別（而不是物件型別）
	//console.log(xhr.responseText);
    //需要將JSON字串轉換為JSON物件
    var responseText=JSON.parse(xhr.responseText )
	console.log(responseText)  //輸出為物件型別
}

請求引數傳遞

GET請求方式

xhr.open('get','http://www.example.com?name=zhangsan&age=20");

• 具體實作

//為按鈕添加點擊事件
btn.onclick = function () {
    //創建ajax物件
    var xhr = new XMLHttpRequest();
    //獲取用戶在文本框中輸入的值
    var nameValue = username.value;
    var ageValue = age.value;
    //拼接請求引數
    var params='username='+ nameValue +'&age='+ ageValue;
    //配置ajax物件
    xhr.open('get','http://localhost:3000/get?'
              +params );
    //發送請求
    xhr.send( );
    //獲取服務器端回應的資料
    xhr.onload = function () { 
    	console.log( xhr.responseText)
    }
}

POST請求方式

xhr.setRequestHeader('Content-Type",'application/x-www-form-urlencoded')
xhr.send('name=zhangsan&age=20');

• 具體實作

//為按鈕添加點擊事件
btn.onclick = function () {
    //創建ajax物件
    var xhr = new XMLHttpRequest();
    //獲取用戶在文本框中輸入的值
    var nameValue = username.value;
    var ageValue = age.value;
    //拼接請求引數
    var params='username='+ nameValue +'&age='+ ageValue;
    //配置ajax物件
    xhr.open('post','http://localhost:3000/post');
    //設定請求引數格式的型別（POST請求必須要設定）
    xhr.setRequestHeader('Content-Type",'application/x-www-form-urlencoded');
    //發送請求
    xhr.send(params);
    //獲取服務器端回應的資料
    xhr.onload = function () { 
    	console.log(xhr.responseText)
    }
}

請求引數的格式

JSON請求只能在POST中使用
在請求頭中指定Content-Type屬性的值是application/json
告訴服務器端當前請求引數的格式是json

• 具體實作

  <script type="text/javascript">
  // 1.創建ajax物件
  var xhr = new XMLHttpRequest();
  // 2.告訴Ajax物件要向哪發送請求，以什么方式發送請求
  // 1)請求方式2)請求地址
  xhr.open('post','http://localhost:3000/json');
  //通過請求頭告訴服務器端客戶端向服務器端傳遞的請求引數的格式是什么
  xhr.setRequestHeader('Content-Type','
  application/json');
  //3.發送請求
  // JSON.stringify() 將json物件轉換為json字串
  xhr.send(JSON.stringify({name:'lisi',age:50}));
  //4.獲取服務器端回應到客戶端的資料
  xhr.onload = function (){
  	console.log(xhr.responseText)
  }
  </script>