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

最新推荐文章于 2024-04-26 00:19:50 发布

Jim.KK

最新推荐文章于 2024-04-26 00:19:50 发布

阅读量682

点赞数

分类专栏： Java 文章标签： ajax java

本文链接：https://blog.csdn.net/Hsk_03/article/details/109150488

版权

Java 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

前往B站看教程

JQuery and Ajax

一个可以简化操作的原生javascript库
中文音译：阿贾克斯

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

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

>>>> 搜索框搜索内容

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

Ajax 运行环境

网站服务器
localhost域名方式打开文件才可以生效，否则不会生效

<App.js>

//引入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>
    <script type = "text/javascript">
        //-1--创建ajax对象
        var xhr = new XMLHttpRequest();//构造函数
        //-2--告诉ajax向哪里，以何种方式发送请求
        //1）请求方式 2）请求地址
        xhr.open('get','http://localhost:3000/responseData');
        //-3--发送数据请求
        xhr.send();
        //获取服务器端响应到客户端的数据
        xhr.onload = function(){
            //xhr下的变量reponseText存储的就是返回的数据
            console.log(xhr.responseText)
            console.log(typeof xhr.responseText)
        }
    </script>
</body>

app.js

//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));
//----------------------------------------------------------------------------
app.get('/first',(req,res)=>{
        res.send('Hello,Ajax!');
});
//----------------------------------------------------------------------------
//创建一个路由
app.get('/responseData',(req,res)=>{
	res.send({"name":"张三"});
});
//----------------------------------------------------------------------------
//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');

处理服务器返回的文件：

xhr.onload = function(){
    var reponseText =  console.log(xhr.responseText);//对json字符串进行转换成json对象
    console.log(reponseText);//输出转换后的效果
}

xhr.onload = function(){
    var reponseText =  console.log(xhr.responseText);//对json字符串进行转换成json对象
    console.log(reponseText);//输出转换后的效果
    var str = '<h2>' + reponseText.name + '<h2>';
    document.body.innerHTML = str;//向body中插入str
}

请求 – 参数 – 格式：

get：

xhr.open=('get','http://www.example.com?name=zhangsan&age=20')
// ？ 用于分隔请求地址与请求参数
// &  用于拼接不同的请求参数

post：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('name=zhangsan&age=20');

报文头：

报文头：键值对（客户端向服务器端说的一些话）
报文体：内容

请求参数的格式：

  //“ = ”的传递方式
  application/x-www-form-urlencoded
      //对应的解析方式为：app.use(bodyParser.urlencoded());

  name=zhangsan&age=20&sex=男

  //JSON 字符串格式
  application/json
      //对应的解析方式为：app.use(bodyParser.json());

  {name:'zhangsan',age:'20',sex:'男'}

  JSON.stringify();//将JSON对象转换为JSON字符串

get方法不能传递json方式的请求，只能传递第一种请求方式。

传统的也不能使用 JSON 格式。

Ajax 状态码区别于服务器状态码 404 那个

创建Ajax对象 --> 配置Ajax对象 --> 发送请求 --> 接收完服务器的相应数据

onload与onreadystatechange比较
获取Ajax状态码：xhr.readyState

获取服务器状态码：xhr.status

创建完Ajax对象：0
```
var xhr = new XMLHttpRequest();
```

open：1

console.log(xhr.reradyState);
xhr.open('get','http://localhost:3000/readystate');

send ：2

console.log(xhr.reradyState);
xhr.send();

xhr.onreadystatechange = function(){
    //状态码 会变成：
    //2 请求已经发送
    //3 已经接收到服务器端的部分数据了
    //4 服务器端的相应数据已经接受完成了
    console.log(xhr.readyState);
    
    if(xhr.readyState == 4){
        console.log(xhr.reponseTest);
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6jJJ8byl-1602998229802)(C:\Users\18130\AppData\Roaming\Typora\typora-user-images\image-20201018122419791.png)]

Ajax 错误处理

xhr.status – 服务器状态码

1、网络畅通，服务器端能接受请求，但是返回的不是预期的状态码

2、网络畅通，服务器没有找到（地址填写错误之类的），返回 404 NOT FOUND

3、网络畅通，服务器端能收到请求，返回 500 状态码

服务器端错误，找服务器端程序员修改

4、网络不畅通

onerrir 事件

提示：未连接互联网

Ajax状态码：表示Ajax执行的过程

服务器状态码：表示服务器返回的状态码

IE 浏览器的缓存问题：

问题	描述	解决方案
IE低版本浏览器缓存问题	当客户端通过 IE 浏览器提交访问的时候，第二次访问相同的网址，即使断网，也会返回一样的内容	在请求地址后面加上一个随机字符串作为参数 “？t=” + math.random();
IE低版本浏览器不支持onload方法	就是不支持onload

//cache in app.js
const fs = require('fs');

app.get('/cache',(req,res)=>{
    fs.readFile('./test.txt',(err,result)=>{
        res.send(result);
    });
});

函数记录

方法	作用	距举例
var xhr = new XMLHttpRequest（）；	创建ajax对象
xhr.open(‘get’,‘http://www.example.com’);	告诉Ajax的请求地址以及请求方式：
xhr.send();	发送请求
xhr.onload = function(){ console.log(xhr.responseText); }	获取服务器端返回的数据（由于有一定的时间延迟，所以要添加事件处理函数）
JSON.parse（）；	将json字符串转换成json对象	xhr.onload = function(){ var reponseText = console.log(xhr.responseText);//对json字符串进行转换成json对象 console.log(reponseText);//输出转换后的效果 }
typeof	显示数据类型	xhr.onload = function(){ console.log(typeof xhr.responseText); }

例子：

1.1、账户 && 密码.html：

<body>
    <p>
        <input type="text" id="username">
    </p>
    
    <p>
        <input type="text" id="pwd">
    </p>
    <p>
        <input type="button" value="提交">
    </p>
    <script>
        var btn = document.getElementById('btn');
        var username = document.getElementById('username');
        var pwd = document.getElementById('pwd');

        btn.onclick = function() {
            var xhr = new XMLHttpRequest();

            //用户在文本框中输入的值
            var userValue = username.value;
            var pwdValue  = pwdValue.value;

            var params = "username=" + userValue + "&pwd=" + pwdValue; 

            xhr.open('get','localhost:3000/get?'+userValue+"&" + params);

            xhr.send();
        }
    </script>
</body>

1.2 、账户 && 密码.js :

Jim.KK

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Ajax 01】Ajax原理-及-使用（黑马教程ajax笔记）

前往B站看教程JQuery and Ajax一个可以简化操作的原生javascript库中文音译：阿贾克斯 > 加载更多就是使用ajax进行无刷新加载数据的方式 >> 切换分页，当从第一页切换到第二页的时候，只有表单内的数据发生变化，页面不会刷新 >>>> 搜索框搜索内容 >>>> 注册或者登陆的时候填写表单Ajax 运行环境网站服务器localhost域名方式打开文件才可以生效，否则不会生效&l
复制链接

扫一扫