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.模板标签等高级特性. 开 ...
随机推荐
- SharePoint自己定义程序页面部署 不用重新启动IIS
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/dz45693/article/details/30840255 SharePoint的部署方式默认是 ...
- C#配合大数据开发,nest.dll的使用
一,添加Nest.dll引用 结果如下多了如下DLL: Elasticsearch.Net.dll,Nest.dll 二,上代码: using Common.EsModel; using Elasti ...
- Java 关于SpringbootJPA分页及排序
创建Pageable对象 看了网上很多博客,都是在用 new PageRequest的方法创建Pageable对象.可是估计很多同学写了之后才发现原来这个方法作者已经标记为过时了: 替代的方法是不要n ...
- Docker拷贝宿主机与容器中的文件
如果我们需要将宿主机文件拷贝到容器内可以使用 docker cp 命令,也可以将文件从容器内拷贝到宿主机 将宿主机文件拷贝到容器内 docker cp 要拷贝的宿主机文件或目录 容器名称:容器文件或目 ...
- php内置函数分析range()
PHP_FUNCTION(range) { zval *zlow, *zhigh, *zstep = NULL, tmp; , is_step_double = ; double step = 1.0 ...
- python基本数据类型常用方法
python基本数据类型 1.整型 1.1 int 1.2 bit_lenght # 当前数字的二进制位数,至少用n位表示 r = age.bit_length() >>> a = ...
- 【NOIP2016提高A组8.12】总结
惨败!!!! 第一题是一道神奇的期望问题. 第二题,发现"如果两个部门可以直接或间接地相互传递消息(即能按照上述方法将信息由X传递到Y,同时能由Y传递到X),我们就可以忽略它们之间的花费&q ...
- WEB实现大文件上传和下载
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- 2017乌鲁木齐网络赛 J题 Our Journey of Dalian Ends ( 最小费用最大流 )
题目链接 题意 : 给出一副图,大连是起点,终点是西安,要求你求出从起点到终点且经过中转点上海的最小花费是多少? 分析 : 最短路是最小费用最大流的一个特例,所以有些包含中转限制或者经过点次数有限制的 ...
- 【HDOJ6701】Make Rounddog Happy（启发式合并）
题意:给定一个长为n的序列和k,定义子串[L,R](L<=R)合法当: 1.max(a[L]..a[R])-(R-L+1)<=k 2.[L,R]中没有重复的数字 问合法子串的个数 n,k, ...