AJAX基础入门

最新推荐文章于 2024-05-14 22:29:56 发布

学不会不改名的小林

最新推荐文章于 2024-05-14 22:29:56 发布

阅读量613

点赞数 2

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq331697853/article/details/128119715

版权

第1章认识Ajax

1.1 初识 ajax

我们平常上网，不管是注册账号，还是浏览网页，其本质就是通过客户端向服务器发送请求，服务器接到请求后返回处理后的数据给客户端；
在我们之前学习代码中，向服务器提交数据典型的应用是就是 form 表单，其中的 action 就是我们提交数据的服务器端地址；

完成一个 form 表单；
当我们点击提交按钮时，页面就会跳转到服务器页面；

但是，我本不想让页面跳转，数据也能被发送到服务器端，同时，还可以接受服务器返回的数据；

当我注册一个网站的账号时，填写完用户名并没有点击提交，但是，用户名如果有重复，文本框的傍边便会提示我更换用户名；

2018060970057

类似的功能还有验证短信的发送、百度搜索的关键字推举、无刷新的分页等等……

想要完成这些类似的功能实现，我们今天所要学习的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')
    }
})

第2章 Ajax对象

2.1 获取对象

通过上一节我们发现，想要使用 ajax 的一系列功能，我们就必须先得到 ajax 对象

基于 W3C标准浏览器：

var xhr = new XMLHttpRequest();

基于IE内核的浏览器:

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

<script>
    var btu = document.getElementById('btu');
    btu.onclick = function(){
     
        //基于 W3C标准 浏览器
        var xhr = new XMLHttpRequest();
        alert(xhr);

        //基于IE内核的浏览器， W3C标准浏览器中报错
        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
        alert(xhr);
    }
</script>

浏览器标准不一样，得到的对象也不一样，我们也不知道客户使用什么样的浏览器，因此，我们需要解决兼容性问题；

修改上述代码并测试，具有兼容性：

<script>
var btu = document.getElementById('btu');
btu.onclick = function(){
     
	try{
     
		var xhr =  new XMLHttpRequest()
	}catch(e){
     };

	try{
     
		var xhr = new ActiveXObject('Microsoft.XMLHTTP')
	}catch(e){
     };

	alert(xhr);
}
</script>

再次对代码进行修改 兼容代码封装进函数调用

<script>
    var btu = document.getElementById('btu');
    btu.onclick = function(){
     
        //封装进函数供其他程序调用
        function cXHR(){
     
            try{
     return new XMLHttpRequest()}catch(e){
     };
            try{
     return new ActiveXObject('Microsoft.XMLHTTP')}catch(e)

最低0.47元/天解锁文章

学不会不改名的小林

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX基础入门

我们平常上网，不管是注册账号，还是浏览网页，其本质就是通过客户端向服务器发送请求，服务器接到请求后返回处理后的数据给客户端；在我们之前学习代码中，向服务器提交数据典型的应用是就是 form 表单，其中的 action 就是我们提交数据的服务器端地址；完成一个 form 表单；当我们点击提交按钮时，页面就会跳转到服务器页面；但是，我本不想让页面跳转，数据也能被发送到服务器端，同时，还可以接受服务器返回的数据；当我注册一个网站的账号时，填写完用户名并没有点击提交，但是，用户名如果有重复，文本框的傍边便会提示
复制链接

扫一扫