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的快速入门的更多相关文章

  1. SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  2. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  3. html5快速入门（一）—— html简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  4. AngularJS 30分钟快速入门【译】

    引用自:http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/,翻译如下: 简介 我三年前开始使用 ...

  5. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  6. AngularJS快速入门指南17：Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  7. AngularJS快速入门指南16：Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  8. AngularJS快速入门指南14：数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. AngularJS快速入门指南12：模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

随机推荐

  1. Python 调用 ES、Solr、Phoenix

    #!/usr/bin/env python # -*- coding:utf-8 -*- # ************************************* # @Time : 2019/ ...

  2. SSL/TLS 链接的建立/握手

    HTTPS 即 HTTP-within-SSL/TLS,其中 SSL/TLS 又分别表示: SSL:Secure Sockets Layer TLS:Transport Layer Security ...

  3. Slickflow.NET 开源工作流引擎快速入门之一: 简单序列流程代码编写示例

    前言:对于急切想了解引擎功能的开发人员,在下载版本后,就想尝试编写代码,完成一个流程的开发和测试.本文试图从一个最简单的流程来示例说明,如何快速了解引擎代码的编写. 版本: .NETCore 2.1 ...

  4. Java操作数据库——使用连接池连接数据库

    Java操作数据库——使用连接池连接数据库 摘要:本文主要学习了如何使用JDBC连接池连接数据库. 传统方式和连接池方式 传统方式的步骤 使用传统方式在Java中使用JDBC连接数据库,完成一次数据库 ...

  5. IDEA激活码

    MNQ043JMTU-eyJsaWNlbnNlSWQiOiJNTlEwNDNKTVRVIiwibGljZW5zZWVOYW1lIjoiR1VPIEJJTiIsImFzc2lnbmVlTmFtZSI6I ...

  6. iOS-基于TCP连接<Scoket-服务端>

    一:前言(本文为TCP服务端) TCP首先要服务器开放一个端口 然后客户端去连接服务端的IP地址和端口号 连接成功之后再进行数据传输 要经历三次握手 二:代码在GitHub 1.需要的工具类 自行下载 ...

  7. PHP 部分语法（二）

    array() 创建数组: 1.数值数组:带数字 ID 键的数组 2.关联数组:带有指定键的数组,键关联一个值 3.多维数组:包含一个或多个数组的数组 $arr = array("Hello ...

  8. fork函数的一些小结

    今天遇到一个这样的问题,假设父进程有一个变量S,fork后,子进程中的变量S地址是否和父进程中的变量S 是相同的? 再学操作系统的时候,知道fork是采用的写时复制,所以如果子进程或者父进程不对变量S ...

  9. MATLAB实例：对称双随机矩阵

    MATLAB实例:对称双随机矩阵 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 双随机矩阵(doubly stochastic matrix):元素属 ...

  10. Comet OJ - Contest #8

    Comet OJ - Contest #8 传送门 A.杀手皇后 签到. Code #include <bits/stdc++.h> using namespace std; typede ...