Ajax的快速入门
1.什么是ajax
ajax是技术名词的缩写：
Asynchronous:异步；
JavaScript:JavaScript语言；
And:和、与；
XML:数据传输格式
ajax是客户端通过HTTP向服务器发送请求
2.ajax对象的属性、方法
属性
readyState: Ajax状态码
3.xhr.getAllResponseHeaders() 获取全部响应头信息
4.xhr.getResponseHeader('key') 获取指定头信息
5.send([content]) ：发送Ajax请求content ： 如果是get请求时，此参数为null;如果是post请求时，此参数就是要传递的数据
注意: 所有相关的事件绑定必须在调用send()方法之前进行.
3.案例
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
用户名:<input type="text" value="" id="inp">
<span></span>
</body>
<script>
var inp=document.getElementById('inp');
inp.onblur=function(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.responseText==1){
inp.nextElementSibling.innerHTML='此用户名不可以用';
inp.nextElementSibling.style.color='red';
}
else{
inp.nextElementSibling.innerHTML='此用户名可以用';
inp.nextElementSibling.style.color='green';
} }
}
xhr.open('get','http://127.0.0.1:8000/getone?'+inp.value);
xhr.send();
}
</script>
</html>
js页面
//引入http模块
var http = require('http');
//引入fs模块
var fs = require('fs');
//引入url模块
var url = require('url');
//创建一个server对象
var server = http.createServer();
//设置8000端口
server.listen(8000, function () {
console.log('启动8000服务器', 'http//127.0.0.1:8000')
});
//设置server事件
server.on('request', function (req, res) {
//判断路径
var urls = url.parse(req.url);
if (urls.pathname == '/getone') {
// console.log(urls.query);
if (urls.query == "admin") {
res.end('1');
}
else {
res.end('0');
}
}
else {
fs.readFile('.' + urls.pathname, function (err, data) {
if (!err) {
res.end(data);
}
else {
res.end('');
}
});
}
});
Ajax的快速入门的更多相关文章
- SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）
SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- html5快速入门（一）—— html简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- AngularJS 30分钟快速入门【译】
引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...
- AngularJS快速入门指南18：Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南17：Includes
使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...
- AngularJS快速入门指南16：Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南14：数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南12：模块
AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...
随机推荐
- ej3-0开端
开始 编码多年,总有一些最佳实践,Java也是,比如设计模式,比如Effective Java 3 (ej3) . 设计模式先后看过<大话设计模式>,<HeadFirst 设计模式& ...
- python Json报错json.decoder.JSONDecodeError
近期工作中遇到一个问题,执行json.loads(json_data)时,在json_data中加上tab空格后就报错,不加则不报错 一.json.loads(json_data) 报错json.de ...
- vuex动态引入store modules
主要解决的问题每次建一个module需要自己去主index.js里面去注册 为了偷懒,也为了避免团队开发时同时对index.js 进行修改引发冲突 所以在index.js中 动态的对子目录和模块进行注 ...
- Java 添加Word目录的2种方法
目录是一种能够快速.有效地帮助读者了解文档或书籍主要内容的方式.在Word中,插入目录首先需要设置相应段落的大纲级别,根据大纲级别来生成目录表.本文中生成目录分2种情况来进行: 1.文档没有设置大纲级 ...
- fiddler抓包syntaxview窗口乱码
只需再fiddler界面GO往右第二个Decode点击一下,让他出现蓝色边框即可 注意:抓取前的他不会进行自动解码,要再重新刷新页面才能获取界面后的内容
- 简约工作汇报总结演讲辩论创业投资PPT模板
不管是什么风格的PPT模板,排版布局条例清新,画面干净,也会跟文字内容相辅相成,完成一个好的学生答辩PPT. 模版来源:http://ppt.dede58.com/gongzuohuibao/262 ...
- hive查询语句入门（hive DDL）
hive DDL 启动hadoop /apps/hadoop/sbin/start-all.sh 开启MySQL库,用于存放hive的元数据 sudo service mysql start 启动hi ...
- Python 元組 Tuple
元組 Tuple 宣告 元組是用逗號分隔的一列值: >>> t = 'a',1,'b',2,'c',3>>> t('a', 1, 'b', 2, 'c', 3)&g ...
- OC-AVAudioPlayer的使用小记
- (void)viewDidLoad { [super viewDidLoad]; //设置音乐的后台播放,注意background mode中需要勾选上 AVAudioSession *sessi ...
- 安装 tensorflow 1.1.0；以及安装其他相似版本tensorflow遇到的问题；tensorflow 1.13.2 cuda-10环境变量配置问题；Tensorflow 指定训练时如何指定使用的GPU；
# 安装 2.7 环境conda create -n python2. python= conda activate python2. # 安装 1.1.0 gpu版本pip # 配置环境变量expo ...