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.模板标签等高级特性. 开 ...
随机推荐
- spring boot 枚举使用的坑2
上一篇说到在枚举当在controller的方法做参数时的坑,解决方法是配置了一个converter,后来想想,如果不闲每次都加一个注解麻烦的话,可以在参数前面加一个注解,添加一个解析器应该也可以解决这 ...
- 虚拟机的网卡基本配置和基本linux命令
1.切换到/etc/sysconfig/network-script目录 cd /etc/sysconfig/network-scripts 2.将ifcfg-eth0备份成ifcfg-eth0. c ...
- leetcode第一题(easy)
第一题:题目内容 Given an array of integers, return indices of the two numbers such that they add up to a sp ...
- 混合加密算法(RSA和DES)
一.混合加密的理由 a.前面提及了RSA加解密算法和DES加解密算法这两种加解密算法,由于随着计算机系统能力的不断发展,DES的安全性比它刚出现时会弱得多,追溯历史破解DES的案例层出不穷,一台实际的 ...
- OneDrive网盘资源下载教程
目录 1. 本文地址 2. 下载流程 3. 打赏&支持 1. 本文地址 博客园:https://www.cnblogs.com/coco56/p/11161530.html CSDN:http ...
- NOTIFY - 生成一个通知
SYNOPSIS NOTIFY name DESCRIPTION 描述 NOTIFY 命令向当前数据库中所有执行过 LISTEN name, 正在监听特定通知条件的前端应用发送一个通知事件. 传递给前 ...
- Ubuntu 16.04安装N卡驱动、cuda、cudnn和tensorflow GPU版
安装驱动 最开始在英伟达官网下载了官方驱动,安装之后无法登录系统,在登录界面反复循环,用cuda里的驱动也出现了同样的问题.最后解决办法是把驱动卸载之后,通过命令行在线安装驱动. 卸载驱动: sudo ...
- 020-VMware虚拟机作为OpenStack计算节点，上面的虚拟机无法启动问题解决
问题描述: VMware虚拟机作为OpenStack计算节点,如果安装的操作系统是CentOS7.3,则在此计算节点放置的虚拟机无法正常启动,报如下错误: 在创建计算节点时,为了能让 KVM 能创 ...
- [每日一学]apache camel|BDD方式开发apache camel|Groovy|Spock
开发apache camel应用,最好的方式就是tdd,因为camel的每个组件都是相互独立并可测试的. 现在有很多好的测试框架,用groovy的Spock框架的BDD(行为测试驱动)是比较优秀和好用 ...
- C#的Class的几个修饰符
none or internal 类只能在当前的工程中访问 Public 类可以在任何地方访问 abstract or internal abstract ...