day57——ajax之初体验
Posted 东易韦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了day57——ajax之初体验相关的知识，希望对你有一定的参考价值。
转行学开发，代码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 text httpRequest.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之初体验的主要内容，如果未能解决你的问题，请参考以下文章