转行学开发，代码100天——2018-05-12
今天是一个特别的日子——首先是母亲节，在此也祝福亲爱的妈妈健康长寿。其次今天是汶川大地震10周年，10年过去了，经历过苦难的人更加坚毅勇敢地面向未来！
祝福，祝愿！
今天记录的是一节ajax的学习笔记。初步了解和尝试ajax的使用。
关于ajax的基本概念就不在此赘述了。直接说明ajax的应用步骤。
1.创建ajax对象
// Old compatibility code, no longer needed.if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... ???httpRequest = new XMLHttpRequest();} else if (window.ActiveXObject) { // IE 6 and older ???httpRequest = new ActiveXObject("Microsoft.XMLHTTP");}这里，需要考虑兼容性，此段代码可以作为基本代码段直接复用。
2.连接到服务器
其基本语句结构为：httpRequest.open（方法，文件，异步传输）;
如：
httpRequest.open(‘GET‘, ‘http://www.example.org/some.file‘, true);
参数1：连接服务器的常用方法有“GET”,"POST"方法。
区别一：
get是从服务器上获取的数据。
podt则是向服务器传送数据。
区别二：
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
区别三：
get方式，服务器端用Request.QueryString获取变量的值。
post方式，服务器端用Request.Form获取提交的数据。
区别四：
get传送的数据量较小，不能大于2KB。
post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
区别五：
get安全性比较低。
post安全性较高。
参数2：请求文件
参数3：true 异步传输（默认值）；false 同步传输
3.发送请求
httpRequest.send();
4.接收返回值
httpRequest.onreadystatechange = nameOfTheFunction;
nameOfTheFunction 用于对返回值进行下一步处理：
readyState
if (httpRequest.readyState === XMLHttpRequest.DONE) { ???// Everything is good, the response was received.} else { ???// Not ready yet.}readyState 有以下几个值：
- 0 (uninitialized) or (request not initialized)
- 1 (loading) or (server connection established)
- 2 (loaded) or (request received)
- 3 (interactive) or (processing request)
- 4 (complete) or (request finished and response is ready)
接着下一步是对HTTP响应返回值进行区分处理：
status
if (httpRequest.status === 200) { ???// Perfect!} else { ???// There was a problem with the request. ???// For example, the response may have a 404 (Not Found) ???// or 500 (Internal Server Error) response code.}返回结果
responseText 和 responseXML
httpRequest.responseText – returns the server response as a string of texthttpRequest.responseXML – returns the response as an XMLDocument object you can traverse with JavaScript DOM functions
到此一个基本的ajax应用框架就出现了，下面的展示一个基本的例子
<!DOCTYPE html><html><head> ???<title>my first ajax program</title> ???<script type="text/javascript"> ???????window.onload =function(){ ???????????var httpRequest ; ???????????var oBtn = document.getElementById(‘btn‘); ???????????oBtn.onclick = function() ???????????{ ???????????????// 1.创建ajax对象 ???????????????//非ie6 ???????????????if (window.XMLHttpRequest) { ???????????????????httpRequest = new XMLHttpRequest(); ???????????????????alert(httpRequest); ???????????????}else ???????????????{ ???????????????????var httpRequest = new ActiveXObject(‘Microsoft.XMLHttp‘); ???????????????????alert(httpRequest); ???????????????} ???????????//2.连接到服务器 ???????????httpRequest.open(‘GET‘,‘a.txt‘,true); ???????????//3.发送请求 ???????????httpRequest.send(); ???????????//4.接收返回值 ???????????httpRequest.onreadystatechange = function(){ ???????????????if (httpRequest.readyState==4) { ???????????????????if (httpRequest.status==200) { ???????????????????????alert("OK"+httpRequest.responseText); ???????????????????} ???????????????} ???????????} ???????} ???}</script></head><body> ???<input id="btn" type="button" name="" value="读取"></body></html>day57——ajax之初体验
原文地址：https://www.cnblogs.com/allencxw/p/9027686.html