首页 > > 网页制作 > Javascript >

Ajax的快速入门

2019-05-13 07:13:26来源：博客园阅读 ()

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('');
            }
        });
    }
});