专栏首页cwl_Java前端基础-Ajax简介

前端基础-Ajax简介

Ajax 技术

作者:陈文龙


第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')
    }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端基础-JavaScript数据类型转换

    cwl_java
  • 前端基础-JavaScript流程控制

    执行顺序:1243 ---- 243 -----243(直到循环条件变成false)

    cwl_java
  • 前端基础-ECMAScript箭头函数

    ES6可以使用“箭头”(=>)定义函数,注意是普通函数,不要使用这种方式定义类(构造器)。

    cwl_java
  • 原生态Ajax无刷新评论和顶踩代码(记事本打造,无验证)

    <script type="text/javascript"> var xhr=false; var actionType; //todo: var s...

    用户1161731
  • Web前端-Ajax基础技术(上)

    ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程。

    达达前端
  • BOM 操作写法示例

    Joel
  • Python3.7 contextvars 初探

    Python 3.7 于2018年6月27日发布,本篇文章将对其中新增模块contextvars 做初步介绍,为读者勾勒一个大概轮廓。

    Python中文社区
  • Retrofit 风格的 RxCache及其多种缓存替换算法

    之前的文章《给 Java 和 Android 构建一个简单的响应式Local Cache》、《RxCache 整合 Android 的持久层框架 greenDA...

    fengzhizi715
  • Kotlin实用的语法糖:空安全、类型转换 & 相等性判断

    Kotlin被Google官方认为是Android开发的一级编程语言。今天,我将主要讲解,关于Kotlin的一些实用语法糖,主要包括:

    Carson.Ho
  • Mui开发笔记

    1、上面是我根据官方的提示方法,以及问答社区朋友的回答,得到的返回刷新页面的方法。

    李郑

扫码关注云+社区

领取腾讯云代金券