zoukankan      html  css  js  c++  java
  • 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(''); } }); } });

      

  • 相关阅读:
    Android——监听事件OnLongClickListener
    Android——edittext的几个属性
    源码安装Postgresql9.4.1
    添加产品唯一性限制以后,复制按钮不能使用
    [转载]git 忽略某些文件
    grep 命令搜索 带空格的字符
    听故事学会计笔记
    利用Python的三元表达式解决Odoo中工资条中城镇、农村保险的问题
    8.0 Qweb 报表编写步骤
    Buff系统
  • 原文地址:https://www.cnblogs.com/shineguang/p/10850651.html
Copyright © 2011-2022 走看看