第1章 认识Ajax
1.1 初识 ajax
我们平常上网,不管是注册账号,还是浏览网页,其本质就是通过客户端向服务器发送请求,服务器接到请求后返回处理后的数据给客户端;
在我们之前学习代码中,向服务器提交数据典型的应用是就是 form 表单,其中的 action 就是我们提交数据的服务器端地址;
完成一个 form 表单;
当我们点击提交按钮时,页面就会跳转到服务器页面;
但是,我本不想让页面跳转,数据也能被发送到服务器端,同时,还可以接受服务器返回的数据;
当我注册一个网站的账号时,填写完用户名并没有点击提交,但是,用户名如果有重复,文本框的傍边便会提示我更换用户名;
类似的功能还有 验证短信的发送、百度搜索的关键字推举、无刷新的分页等等……
想要完成这些类似的功能实现,我们今天所要学习的ajax技术,就是核心技术;
ajax 也是技术名词的缩写:
Asynchronous [ə'sɪŋkrənəs; eɪ-] :异步的;
JavaScript :JavaScript语言
And :和、与
XML :数据传输格式
1998年微软公司(Microsoft)的Outlook Web Access第一次使用了ajax技术,允许客户端脚本发送HTTP请求,并随后集成在IE4.0中应用(XMLHTTP),到2005年,谷歌(Google)把Ajax成功应用于自家的多款Web系统中(Gmail邮箱、Google Map、Google 搜索建议),
从此Ajax被越来越多的人所接受…
客户端通过HTTP向服务器发送请求
1.2 快速入门
<body> <form action="1-1-1.php" method="get"> <input type="text" name="names" value=""><br> <input type="button" value="提交"> </form> </body> <script> //获取DOM对象 var inp = document.getElementsByTagName('input'); //绑定点击事件 inp[1].onclick = function(){ //获取文本值 var v = inp[0].value; //获取ajax对象 var xhr = new XMLHttpRequest(); //监听状态变化 xhr.onreadystatechange = function(){ //判断状态值 if(xhr.readyState == 4){ //获取服务器返回信息 alert(xhr.responseText); } } //打开链接 xhr.open('get','/test'); //发送连接 xhr.send(); } </script>
http.js
var fs = require('fs'); // 服务器模块 var http = require('http'); var server = http.createServer(); server.listen(8080,function(){ console.log('服务器启动成功,请访问:http://127.0.0.1:8080') }) server.on('request',function(req,res){ var method = req.method; var urls = require('url').parse(req.url); if(method == 'GET'){ if(urls.pathname.indexOf('.html')>=0){ fs.readFile('.'+urls.pathname,function(err,data){ res.end(data); }) }else if(urls.pathname == '/test'){ res.end('123') } // console.log(urls.pathname); }else if(method == 'POST'){ }else{ res.end('err_method') } })