Ajax的快速入门
Posted 行走的阳光
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax的快速入门相关的知识，希望对你有一定的参考价值。
1.什么是ajax
ajax是技术名词的缩写：
Asynchronous:异步；
javascript:JavaScript语言；
And:和、与；
XML:数据传输格式
ajax是客户端通过HTTP向服务器发送请求
2.ajax对象的属性、方法
属性
readyState: Ajax状态码
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的快速入门的主要内容，如果未能解决你的问题，请参考以下文章
达达前端Ajax实战项目源码讲解（快速入门的实例）Github源码