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之初体验的更多相关文章
- Ajax的初体验
一.AJAX的介绍 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. Ajax = ...
- [Ajax] AJAX初体验之-在博客中添加无刷新搜索
现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- python--爬虫入门（七）urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
- SignalR初体验
简介 ASP .NET SignalR[1] 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以 ...
- node.js 初体验
node.js 初体验 2011-10-31 22:56 by 聂微东, 174545 阅读, 118 评论, 收藏, 编辑 PS: ~ 此篇文章的进阶内容在为<Nodejs初阶之express ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- ThinkPHP -- 开发初体验及其几个配置文件的介绍
ThinkPHP是一款不错的轻量级的PHP+MVC框架,它吸取了Ruby On Rails的特性,不仅将Model.View.Controller分开,而且实现了ORM.模板标签等高级特性. 开 ...
随机推荐
- ELK-全文检索技术-elasticsearch集群及sde_restful
1 搭建ES集群 集群的说明 我们计划集群名称为:leyou-elastic,部署3个elasticsearch节点,分别是: node-01:http端口9201,TCP端口9301 n ...
- CSS样式 换行
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...
- JSP页面包含其他页面的三种方式及区别
一. <%@ include file="header.inc"%> 该指令在编译之前先读入指定的页面中的内容(并不对动态内容求值),融合后的完整页面再被整体的转换为一 ...
- Qt Creator的初步使用
http://c.biancheng.net/view/1804.html 启动 Qt Creator,出现如图 1 所示的主窗口: 图 1 Qt Creator主窗口 Qt Creator 的界面很 ...
- 【转】Linux下的磁盘分区方法
转自:https://www.cnblogs.com/lbole/p/8904298.html 一.硬盘接口类型 硬盘的接口主要有IDE.SATA.SCSI .SAS和光纤通道等五种类型.其中IDE和 ...
- PAT Basic 1027 打印沙漏 (20 分)
本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐:相邻两 ...
- linux中未实现的系统调用
afs_syscall, break, fattach, fdetach, ftime, getmsg, getpmsg, gtty, isastream, lock, madvise1, mpx, ...
- 'No application found. Either work inside a view function or push'
问题: 说是create_all()的地方有问题,莫名其妙. 后来经过查资料,找出解决方法.附上代码如下:
- JavaSE---泛型系统学习
1.概述 1.1.泛型: 允许在 定义 类.接口.方法时 使用 类型形参,这个类型形参 将在声明变量.创建对象.调用方法时 动态地指定: 1.2.jdk5后,引入了 参数化类型(允许程 ...
- favicon.ico是什么？
一.什么是favicon? 所谓favicon,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.favicon 中文名称:网页图标 英文名称:favorites ico ...