生ajax送信データ、および不要な方法で送信

生js ajaxリクエスト送信
4ステップ:

//1.    xhr  
var xhr = new XMLHttpRequest();

//2.   open    ajax  
//  1:      （get、post、delete、put）
//  2:           
//  3: true（  、  ）、false（  ）
xhr.open('get', '/getData');

//3.   send    ajax  
xhr.send();

//4.   onload  ，  responseText            
// xhr.responseText:                   
//               :
//  1)      （hello world \ I am xiaoming）
//  2) json   （'{"id":"101", type:"goods", "name":"  "}'）
//     json        JSON.parse        
xhr.onload = function () {
    xhr.responseText
}

リクエスト送信時getパス
getパラメータはurlアドレスの後ろにつなぎますか?分割する

var xhr = new XMLHttpRequest();

//  2       get  ,   ?      
// ?  :    url  
// ?  :      key1=value1&key2=value2&...
xhr.open('get', '/getData?id=1&name=zs&age=20&...');

xhr.send();

xhr.onload = function () {
    xhr.responseText
}

リクエスト送信時postパス
post伝参には3つの方法があります:key=value&key=value&...FormData json文字列

//1. key=value&key=value&...
// application/x-www-form-urlencoded :   key=value       

var xhr = new XMLHttpRequest();

xhr.open('post', '/postData');


//                  
var str = 'id=1&name=zs&age=20&...'

//                application/x-www-form-urlencoded
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

xhr.send(str);

xhr.onload = function () {
    xhr.responseText
}

//2.   FormData     
//1)       post     
var fm = document.querySelector('form');
var fd = new FormData(fm)


//2)        FormData，    append  
var fd = new FormData();
fd.append('name', 'xiaoming');
fd.append('age', 20);
fd.append('img', this.files[0]);


//  ajax   ，             FormData ，        ，   fd      send
var xhr = new XMLHttpRequest();

xhr.open('post', '/postData');

xhr.send(fd);

xhr.onload = function () {
    xhr.responseText
}

//3.            json   
var jsonStr = JSON.stringify({name:"zs", age:20});  //'{name:"zs", age:20}'

var xhr = new XMLHttpRequest();

xhr.open('post', '/postData');

xhr.setRequestHeader('content-type', 'application/json');

xhr.send(jsonStr);

xhr.onload = function () {
    xhr.responseText
}