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.模板标签等高级特性. 开 ...
随机推荐
- 标准库path源码解读
先看标准库 作用:关于路径的一些实用操作 https://github.com/golang/go/blob/master/src/path/path.go 源码地址 func IsAbs func ...
- Maven快速安装配置
环境:windows7_x86 maven3.3.3 maven是管理项目的常用工具,不用安装,直接配置即可.在配置maven前,需要先安装JDK. 1,安装JDK(注意此版本的Maven要 ...
- LINQ 推迟查询的执行
LINQ 在运行期间定义查询表达式时.查询就不会运行.查询会在迭代数据项是运行,例如: static void Main(string[] args) { List<string> lis ...
- Views的补充
views的补充 请求头一般与请求内容用/r/n/r/n隔开 请求头包含的内容 request.Meta(...) 一般在下面几种方法里面取不到的东西需要去原生的头里面去取,比如用户的终端类型 req ...
- luogu P1224 [NOI2013]向量内积
传送门 挺有意思的一道题 暴力60就是枚举每个向量暴力check,随机选向量就能多骗一些分 然后两个向量内积要模\(k\)为\(0\),那么如果全部不为\(0\)就不合法.先考虑\(k=2\),对于向 ...
- Hive常用非交互式命令
[hadoop@hadoop hive-0.13.1]$ bin/hive -help usage: hive -d,--define <key=value> Variable subsi ...
- 北京师范大学第十五届ACM决赛-重现赛E Euclidean Geometry （几何）
链接:https://ac.nowcoder.com/acm/contest/3/E 来源:牛客网 Euclidean Geometry 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ ...
- Codeforces 948 数论推导 融雪前缀和二分check 01字典树带删除
A. 全部空的放狗 B. 先O(NLOGNLOGN)处理出一个合数质因数中最大的质数是多少 因为p1 x1 x2的关系是 x2是p在x1之上的最小倍数 所以x1的范围是[x2-p+1,x2-1]要使最 ...
- java术语（PO/POJO/VO/BO/QO/DAO/DTO）
一.概念理解 这些概念用于描述对象的类型:由于java是面向对象的语言:程序的世界就是各个对象之间的"交互":在交互的工程中会存在多个层次,每个层次中所拥有(关注)的内容都是不 ...
- CCF201412-2 Z字形扫描 java（100分）
试题编号: 201412-2 试题名称: Z字形扫描 时间限制: 2.0s 内存限制: 256.0MB 问题描述: 问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zigzag ...