面试经典题目--原生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 服务器内部错误