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

  

原文地址:https://www.cnblogs.com/shineguang/p/10850651.html

时间: 2024-11-14 08:58:42

Ajax的快速入门的相关文章

Ajax快速入门

Ajax快速入门 2015-1-28????早 8:00 1.如何创建XHR对象 答:按标准 new XMLHttpRequest()即可以得到 ????考虑低版本IE 可以使用new window.ActiveXObject(('Microsoft.XMLHTTP')); ????兼容性创建: ????function createXHR(){ ????????var xhr = null; ????????if(window.XMLHttpRequest){ ????????????xhr

Spring MVC 教程,快速入门,深入分析

资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf SpringMVC核心配置文件示例.rar 作者:赵磊 博客:http://elf8848.iteye.com 目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 六.springMVC-mvc.xml 配置文件片段讲解 七.spring mvc 如何访问到静态的文件,如j

Spring_MVC_教程_快速入门_深入分析

Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf SpringMVC核心配置文件示例.rar 作者:赵磊 博客:http://elf8848.iteye.com 目录 一.前言 二.spring mvc 核心类与接口 三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明

AngularJS快速入门指南14:数据验证

thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table.reference>thead>tr>td, table.reference>tbody>tr>td, table.reference>tfoot>tr>td { padding: 8px; line-height: 1.42857143; vertic

JAVAWEB开发之Struts2详解(一)——Struts2框架介绍与快速入门、流程分析与工具配置以及Struts2的配置以及Action和Result的详细使用

Struts2框架介绍 三大框架:是企业主流JavaEE开发的一套架构.Struts2 + Spring + Hibernate 什么是框架?为什么要学习框架? 框架是实现部分功能的代码(半成品),使用框架简化企业级软件开发. Struts2与MVC? Struts是一款优秀的MVC框架 MVC:是一种思想,是一种模式,将软件分为Model模型.View视图.Controller控制器 JAVAEE软件三层架构:web层(表现层).业务逻辑层.数据持久层(Sun提供javaEE开发规范) Jav

AngularJS快速入门指南17:Includes

使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML imports功能,以支持在HTML中包含其它的HTML文件. <link rel="import" href="/path/navigation.html"> 在服务端包含文件 大部分的web服务器都支持服务端包含文件(Server Side Includes).通过

AngularJS快速入门指南16:Bootstrap

thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table.reference>thead>tr>td, table.reference>tbody>tr>td, table.reference>tfoot>tr>td { padding: 8px; line-height: 1.42857143; vertic

AngularJS快速入门指南12:模块

AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个application("myApp")包含一个控制器("myCtrl"): <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angu

AngularJS快速入门指南02:介绍

AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HTML元素中. AngularJS是一个JavaScript框架 AngularJS是一个JavaScript框架,它是由JavaScript语言编写的类库. AngularJS以JavaScript文件的形式进行发布,我们可以通过script标记将它添加到web页面中: <script src=&quo