转行学开发,代码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应用框架就出现了,下面的展示一个基本的例子
my first ajax program