AJAX-----基础

简介: AJAX-----基础

AJAX

Ajax工作原理

同步和异步

同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。

异步提交:当用户发送请求时,当前页面还可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来 。

需要知道的一些知识

URL

URL地址由三部分组成

传输协议
 域名
 端⼝号

传输协议

  • 我们常⻅的传输协议是 http 和 https
  • 只不过 http 是⼀种常⻅协议,不是很安全
  • https 是⼀种加密传输协议

域名

域名就代表着 ⽹络那⼀头 那个电脑的 IP 地址

其实也就是我们要访问哪⼀个服务器

端⼝号

  • 光找到服务器电脑还不⾏,还得找对⽂件夹才可以
  • ⼤家都把⽂件夹编上号存储了0 ~ 255,一共256 个
  • 每个⽂件夹⾥⾯还有对应的⼩⽂件夹0 ~ 255,一共256 个
  • 那么一共就有256 * 256 个⽂件夹,也就是从0~ 65535
  • 所以我们的端⼝号就有 65536 个,分别对应着0 ~ 65535
  • ⼤家都把80端⼝号作为⼀个⽹站的默认端⼝号
  • http协议默认是80端⼝号
  • https协议默认是443端⼝号

XML

是一门可扩展标记语言,被设计用来传输和存储数据,都是自定义标签

HTTP

响应报文,请求报文

创建 XMLHttpRequest 对象

variable = new XMLHttpRequest();
vairable = new ActiveXObject("Microsoft.XMLHTTP");//老版本(IE5和IE6)

向服务器发送请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
//XMLHttpRequest对象的open()和send()方法

open(method,url,async)

  • method : 请求的类型;GET 或 POST
  • url: 文件在服务器上的位置
  • async: true(异步) 或 false (同步)

send(string)

  • string : 仅用于 POST 请求
GET POST ?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 不愿使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
GET
xmlhttp.open("GET","/try/ajax/demo_get.php",true);  //一个简单的GET请求
xmlhttp.open("GET","/try/ajax/demo_get.php?=" + Math.random(),true) //向 URL 添加一个唯一的ID
xmlhttp.open("GET","/try/ajax/demo_get.php?fname=Henry&lname=Ford",true)   //通过GET 方法添加信息
//===================jQuery中的get post=================================通过 HTTP 请求加载远程数据
$.get('url',{a:100, b:300}, function() {
    //函数体
    //get 请求的参数就直接在 url 后面进行拼接就可以
})
$.post('url',{a:100, b:300}, function() {
    //函数体
    //post 请求的参数是携带在请求体中的,所以不需要再 url 后面拼接
})
//======================================
$.ajax({
    //URL
    url:  ,
    //参数
    data: {a:2, b:30},
    //请求类型
    type:,
    //响应体结果
    dataType: 'json',
    //成功的回调
    success: function(data) {
  },
  //超时时间
  timeout: 3000,
     //失败的回调
    error: function() {
    }
})
POST
xmlhttp.open("POST","/try/ajax/demo_post.php",true); //一个简单的POST请求
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")   //("名字","值")
xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader

通常在HTTP协议里,客户端像服务器取得某个网页的时候,必须发送一个HTTP协议的头文件,告诉服务器客户端要下载什么信息以及相关的参数.

而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的,所以也要发送HTTP头给服务器。

但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里,这是当我们需要修改或添加这些参数时就用到了setRequestHeader 方法.

setRequestHeader方法只是XMLHTTP为添加或修改HTTP头提供的一个接口方法而已,CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式是URL编码,即除了标准字符外,每字节以双字节16进制前加个“%”表示.

GET 方式是没有提交内容的,GET 传参数的方式就是通过虚拟地址传送如:GET /bb.asp?www=1234 HTTP/1.1

参数全部就只有 "www=1234" 这么多;

POST是将参数放到HTTP后面的

setRequestHeader(header,value) : header 规定头的名称; value : 规定头的值

all

服务器响应

responseText

如果来自服务器的响应并非XML, 请使用 responseText 属性

responseText 属性返回字符串形式的响应

responseXML

如果来自服务器的响应是XML, 而且需要作为 XML 对象进行解析,请使用 responseXML 属性

responseType = ‘json’;自动转换

onreadystatechange 事件

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

XMLHttpRequest 对象的三个重要属性
onreadystatechange 储存函数(或函数名), 每当readyState 属性改变时, 就会调用该函数
readyState 存有 XMLHttpRequest 的状态.从0到4发生变化.
status 200:“OK” 404: 未找到页面

每当 readyState 改变时, 就会触发 onreadystatechange 事件(0-1,1-2,2-3,3-4)

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接受
  • 3: 请求处理中
  • 4: 请求也完成, 且响应已就绪

当 readyState 等于4 且状态为 200 时, 表示响应已就绪:

xmlhttp.onreadystatechange=function() {
    if(xmlhttp.readyState==4 && xmlhttp.status==200) {
        //
    }
}

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同)

ASP/PHP

解决缓存问题

open("GET","url?t="+Date.now())

请求超时 网络异常处理

//延时响应
setTimeout(() => {
  //设置响应体  设置允许跨域
  response.send('');
},3000)
// 1. 创建对象
            const xhr = new XMLHttpRequest();
            //超时设置   2s设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function() {
            }
            //网络异常
            xhr.onerror = function() {
            }

abort() 取消请求

请求重复发送问题

// 假设有一个按钮控制着发送请求
const btn = document.querySelector('button');
let x = null;
let isSending = false;  // 是否正在发送请求
btn.onclick = function() {
    if(isSending) {
        x.abort(); //如果正在发送,则取消该请求,创建一个 新请求
        x = new XMLHttpRequest();
        //修改 isSending 的值
        isSending = true;
        x.open("GET","URL");
        x.send();
        ...
    }
}

Axios函数

axios.defaults.baseURL = "";
axios.get("",{
  params: {
  },
  headers: {
  },
  ...
})
//===========没搞明白
axios.post("",{
  ...
})


相关文章
|
11月前
|
网络协议 API 网络安全
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
Web实时通信的学习之旅:轮询、WebSocket、SSE的区别以及优缺点
1309 0
|
存储 区块链
DAPP合约代币三三复制公排系统开发模式详情
要理解智能合约的概念和作用,首先需要了解区块链的基本架构
|
设计模式 安全 Java
深入浅出 - 单例模式
深入浅出 - 单例模式
147 0
深入浅出 - 单例模式
|
存储 索引
计算机高职专业VB知识要点005 VB中一维数组、二维数组,如何声明?如何使用?数组特性和数据重组思想
计算机高职专业VB知识要点005 VB中一维数组、二维数组,如何声明?如何使用?数组特性和数据重组思想
269 0
计算机高职专业VB知识要点005 VB中一维数组、二维数组,如何声明?如何使用?数组特性和数据重组思想
|
数据采集 Python API
Python爬虫从入门到放弃(十八)之 Scrapy爬取所有知乎用户信息(上)
爬取的思路 首先我们应该找到一个账号,这个账号被关注的人和关注的人都相对比较多的,就是下图中金字塔顶端的人,然后通过爬取这个账号的信息后,再爬取他关注的人和被关注的人的账号信息,然后爬取被关注人的账号信息和被关注信息的关注列表,爬取这些用户的信息,通过这种递归的方式从而爬取整个知乎的所有的账户信息。
1620 0
|
2天前
|
人工智能 JavaScript 测试技术
Qwen3-Coder入门教程|10分钟搞定安装配置
Qwen3-Coder 挑战赛简介:无论你是编程小白还是办公达人,都能通过本教程快速上手 Qwen-Code CLI,利用 AI 轻松实现代码编写、文档处理等任务。内容涵盖 API 配置、CLI 安装及多种实用案例,助你提升效率,体验智能编码的乐趣。
261 99
|
3天前
|
JSON fastjson Java
FastJson 完全学习指南(初学者从零入门)
摘要:本文是FastJson的入门学习指南,主要内容包括: JSON基础:介绍JSON格式特点、键值对规则、数组和对象格式,以及嵌套结构的访问方式。FastJson是阿里巴巴开源的高性能JSON解析库,具有速度快、功能全、使用简单等优势,并介绍如何引入依赖,如何替换Springboot默认的JackJson。 核心API: 序列化:将Java对象转换为JSON字符串,演示对象、List和Map的序列化方法; 反序列化:将JSON字符串转回Java对象,展示基本对象转换方法;

热门文章

最新文章