【Ajax 01】Ajax原理-及-使用(黑马教程ajax笔记)

前往B站看教程

JQuery and Ajax

  1. 一个可以简化操作的原生javascript

  2. 中文音译:阿贾克斯

​ > 加载更多就是使用ajax进行无刷新加载数据的方式

​ >> 切换分页,当从第一页切换到第二页的时候,只有表单内的数据发生变化,页面不会刷新

​ >>>> 搜索框搜索内容

​ >>>> 注册或者登陆的时候填写表单

Ajax 运行环境

  • 网站服务器
  • localhost域名方式打开文件才可以生效,否则不会生效
//引入express框架
const express = require('express');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));

//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');

localhost:3000 来访问

Ajax实现原理

1、传统网络中:由浏览器向服务器发送请求,接受数据,但是在发送请求接受数据的时候无法刷新页面

2、ajax代替浏览器完成请求的发送与接收

​ ajax接收到数据之后,再添加到DOM中去

Ajax的使用

1、创建Ajax对象:

var xhr = new XMLHttpRequest();

​ XML:服务器端与客户端的传输数据格式

​ HttpRequest:Http请求

2、告诉Ajax的请求地址以及请求方式:

xhr.open('get','http://www.example.com');

3、发送请求:

xhr.send();

4、获取服务器端返回的数据(由于有一定的时间延迟,所以要添加事件处理函数)

xhr.onload = function(){
    console.log(xhr.responseText);
}
例子:
*.html
<body>
    
                    
                    

你可能感兴趣的:(Java,ajax,java)