文章目录
前言
紧接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 都发生变化。