面試經典題目--原生ajax

ajax是一種異步請求數據的技術，對用戶體驗和程序性能有幫助

新建一個ajax對象

var xmlhttp
if(window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest() 
}else {
	xmlhttp = new ActiveXObject()
}

連接服務器

open(method[GET, POST], url (服務器的地址，相對或者絕對位置), async(true是異步， false是同步))

• get請求

xmlhttp.open('GET', 'http://www.baidu.com', false)

• post請求

xmlhttp.open('POST', 'http://www.baidu.com', false)

發送參數

• get 方式 發送信息時直接加參數到url上就可以，比如url?a=a1&b=b1

xmlhttp.send()

• post方式
  post請求一定要設置請求頭的格式內容

json:內容類型 send裏的json要用JSON.stringify包裝

xmlhttp.setRequestHeader('content-type', 'application/json; charset=utf-8')
xmlhttp.send(
	JSON.stringify({
		name:'ss',
		age:18
	})
)

form:表單類型

 <form name="myForm" action="http://localhost:3000/a" onsubmit="return validateForm()" method="post">
    名字: <input type="text" name="name">
    <input type="submit" value="提交">
  </form>
   function validateForm() {
      var x = document.forms["myForm"]["fname"].value;
      if (x == null || x == "") {
        alert("需要輸入名字。");
        return false;
      }
    }

xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded; charset=utf-8')

tips:讓表單提交後不跳轉的方法
寫一個iframe,它的name賦值給form的target

	<form target='myIframe'></form>
    <iframe id="myIframe" name="myIframe"></iframe>

文本

xmlhttp.setRequestHeader('content-type', 'text/plain; charset=utf-8')

文件上傳(不對字符編碼)

xmlhttp.setRequestHeader('content-type', 'multipart/form-data; charset=utf-8')

服務器響應

如果async選擇同步處理（false），會等待服務器響應，省去額外的onreadystatechange代碼

    <div id="mydiv"></div>
    document.getElementById("mydiv").innerHTML = xmlhttp.responseText

異步處理–onreadystatechange事件是代碼複雜化，這是在沒有得到服務器響應的情況下，防止代碼停止的最安全的方法

    <div id="mydiv"></div>
	xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	    	    document.getElementById("mydiv").innerHTML = xmlhttp.responseText
	    }
	}

五種請求狀態（readyState ）

1. 0 請求未初始化
2. 1 服務器連接已建立
3. 2 請求已接收
4. 3請求處理中
5. 4 請求已完成， 且響應已就緒

status

1. 200 ok
2. 304 該資源在上次請求後沒有任何修改（瀏覽器緩存， 使用get的時候尤爲注意）
3. 403 forbiden
4. 404 not found
5. 408 請求超時
6. 500 服務器內部錯誤