2021-07-13 补充数字操作与AJAX技术

最新推荐文章于 2024-08-27 15:59:21 发布

←whisky￡

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量198

点赞数

分类专栏： java基础知识整理使用文章标签： ajax javascript

本文链接：https://blog.csdn.net/qq_48488331/article/details/118691451

版权

java基础知识整理使用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

前言
一、数字？
二、AJAX技术

前言

紧接12号的博客，继续更新，首先补充上篇博客有关数字部分的知识内容

一、数字？

JavaScript只有一种数值类型，书写数值带不带小数点均可

	 var x = 3.4;
	 var y = 3;

超大或者超小的数可以通过科学技术法来写
与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。
JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准。
此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：
整数（不使用指数或科学计数法）会被精确到 15 位。小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准：

NaN 属于 JavaScript 保留词，指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：

在对数字进行遍历的同时，结合js的标签，可以达到更好的显示效果

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>遍历数组的最佳方法是使用标准的 for 循环：</p>

<p id="demo"></p>

<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

添加最高索引的元素可在数组中创建未定义的undefined，此方法虽然可以扩大数组的内存大小，但不建议使用

避免使用new Array()

new 关键词只会让代码更加复杂，他还会产生某些不预测的结果

var points = new new Arrays(40);

3.如何去识别一个数组
通常如果使用typeof的话，返回的结果一般为 object ，因为javaScript数组属于对象。

解决方法1 – ECMAScript 5 定义了新方法 Array.isArray()

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p>新的 ECMASCRIPT 5 方法 isArray 在数组上使用时返回 true：</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>

</body>
</html>

但这个方法不支持老的浏览器

解决方法2–创建自己的isArray()函数来解决

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>这个“自制的” isArray() 函数在数组上使用时返回 true：</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>

这个自定义函数的解决方法原理，在于每一个数组都是有一个Array对象，这个对象的原型包含单词“Array”，所以通过判定此对象结构中是否含有Array对象，即可根据返回结果，判断会否为数组

解决方法3–如果对象是由给定的构造器创建。则instanceof运算符返回true

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits instanceof Array;

二、AJAX技术

1.什么是AJAX

以下内容引自百度学术：

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
不刷新页面更新网页
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

AJAX = Asynchronous JavaScript And XML.

AJAX并非编程语言
AJAX仅仅组合了浏览器内建的XMLHttpRequest(从服务器请求数据）
javaScript 和 HTML DOM 显示或者使用数据

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

AJAX的工作原理大致可以理解为：
当浏览器这边有一个事件发生，这个事件可以是按键事件，也可以是页面事件，这时JavaScript创建XMLHttpRequest对象，向web服务器发送相关的请求，
随后服务器处理该请求，服务器将响应发送回页面，
由JavaScript读取响应，由javaScript执行正确的动作.

所以说Ajax的核心就是在XMLHttpRequest对象上
XMLHttpRequest对象用于幕后服务器交换数据，这意味着可以更新网页的部分，不需要重新加载页面

2. 创建 XMLHttpRequest 对象

所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest:

variable = new XMLHttpRequest();

老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象，为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

需要注意的地方是出于安全原因，现代浏览器不允许跨域访问。
这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上

特殊
老版本的 Internet Explorer（IE5 和 IE6）
老版本的 Internet Explorer（IE5 和 IE6）不支持 XMLHttpRequest 对象。

为了对付 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象，亦或创建 ActiveXObject 对象：

3.向服务器发送请求

如需要向服务器发送请求，使用 XMLHttpRequest 对象的 open() 和 send() 方法：

/* open(method,url,async) : 
   method 请求的类型
   url: 服务器文件的位置
   async： true（异步） 或 false(同步)
*/ 
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send()

发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前，此操作可能会导致应用程序挂起或停止。
通过异步发送，JavaScript 不必等待服务器响应，而是可以：
在等待服务器响应时执行其他脚本
当响应就绪时处理响应

4.GET / POST

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

我们不推荐同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。

同步 XMLHttpRequest 正在从 Web 标准中移除，但是这个过程可能需要很多年。

现代开发工具被鼓励对使用同步请求做出警告，并且当这种情况发生时，可能会抛出 InvalidAccessError 异常。

5. onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

status 参考：http 消息参考手册
statusText ：返回状态文本（OK / Not Found）

示例

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

注释：onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。

←whisky￡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-13 补充数字操作与AJAX技术

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码
复制链接

扫一扫

专栏目录