Day_10 Ajax

最新推荐文章于 2022-07-22 19:41:46 发布

grp_grp_grp

最新推荐文章于 2022-07-22 19:41:46 发布

阅读量133

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/grp_grp_grp/article/details/123337988

版权

1. 什么是Ajax

1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML。

2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

4、AJAX 可以使网页实现异步更新

5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

2. ajax 同步和异步区别？

异步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。

同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求，在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。

3. Ajax原理

4. Ajax 实例

var xmlhttp;
if (window.XMLHttpRequest){
	//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	xmlhttp=new XMLHttpRequest();
}else{
	// IE6, IE5 浏览器执行代码
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

5. Ajax语法

(1)、XHR创建对象

1、XMLHttpRequest 是 AJAX 的基础。

2、所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

3、XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

var xmlhttp;
if (window.XMLHttpRequest) { 
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
 xmlhttp=new XMLHttpRequest(); 
} else {
 	// IE6, IE5 浏览器执行代码
 	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

(2)、向服务器发送请求

1、如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

2、GET 还是 POST？

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

然而，在以下情况中，请使用 POST 请求：

（1）、无法使用缓存文件（更新服务器上的文件或数据库）

（2）、向服务器发送大量数据（POST 没有数据量限制）

（3）、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

(3) 服务器响应

$如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

6. Ajax的onreadystatechange 事件

(1)、什么是onreadystatechange事件

1、当请求被发送到服务器时，我们需要执行一些基于响应的任务。。

2、每当 readyState 改变时，就会触发 onreadystatechange 事件。

3、readyState 属性存有 XMLHttpRequest 的状态信息。

(2)、XMLHttpRequest 对象的属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
Xmlhttp.readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
Xmlhttp.status	200: "OK" 404: 未找到页面

7. jQuery Ajax介绍

(1)、什么是 AJAX？

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

(2)、关于 jQuery 与 AJAX

1、如果没有 jQuery，AJAX 编程还是有些难度的。

2、编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

3、jQuery 提供多个与 AJAX 有关的方法。

4、通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

8. jQuery load() 方法

(1)、什么是load() 方法？

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt");
  });
});
</script>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>

、load() 方法回调？

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息

$("button").click(function(){
 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="successs") 
alert("外部内容加载成功!");
 if(statusTxt=="error")
       alert("Error: "+xhr.status+": "+xhr.statusText); 
}); 
});

9. jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

GET 基本上用于从服务器获得（取回）数据。

$("button").click(function(){
 $.get("demo_test.php",function(data,status){
 	alert("数据: " + data + "\n状态: " + status); 
}); 
})

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

demo_test.php 文件代码:

<?php 
echo '这是个从PHP文件中读取的数据。';
 ?>

10. $.ajax()

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

使用 AJAX 请求改变 <div> 元素的文本：

$("button").click(function(){ 
$.ajax({url:"demo_test.txt",success:function(result){ 
$("#div1").html(result); 
}}); 
});+

11. JSON

JSON: JavaScript Object Notation(JavaScript 对象表示法)

JSON 是存储和交换文本信息的语法。类似 XML。

JSON 比 XML 更小、更快，更易解析。

JSON 是轻量级的文本数据交换格式

JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON 具有自我描述性，更易理解

JSON 实例

<h2>JavaScript 创建 JSON 对象</h2> 
<p> 网站名称: <span id="jname"></span><br /> 
网站地址: <span id="jurl"></span><br /> 
网站 slogan: <span id="jslogan"></span><br /> 
</p> <script>
var JSONObject= {
"name":"菜鸟教程", 
"url":"www.runoob.com", 
"slogan":"学的不仅是技术，更是梦想！"
 }; 
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script>

、JSON 语法

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中、数据由逗号分隔、大括号保存对象、中括号保存数组。

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "百度"

JSON 值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在中括号中）、对象（在大括号中）、null

JSON 数字

{ "age":30 }

JSON 对象

{ "name":"百度" , "url":"www.baidu.com" }

JSON 数组

{ "sites": 
[ 
{ "name":"百度" , "url":"www.baidu.com" }, 
{ "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" } 
]
}

JSON 布尔值

{ "flag":true }

JSON null

{ "runoob":null }

JSON 使用 JavaScript 语法创建对象数组

var sites = [ 
{ "name":"runoob" , "url":"www.runoob.com" }, 
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" } 
];

、JSON对象

JSON 对象使用在大括号({})中书写。

对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

你可以使用点号（.）来访问对象的值：

你也可以使用中括号（[]）来访问对象的值

var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null }; 
x = myObj.name;
Y = myObj["site"];

、JSON数组

JSON 数组在中括号中书写。

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

对象属性的值可以是一个数组：

我们可以使用索引值来访问数组：

{ 
"name":"网站", 
"num":3, 
"sites":[ "Google", "Runoob", "Taobao" ] 
}
x = myObj.sites[0];

、JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

例如我们从服务器接收了以下数据：

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

、JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

例如我们向服务器发送以下数据：

var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};

我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：

var myJSON = JSON.stringify(obj);

、JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

如客户想访问 :

https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

假设客户期望返回数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件 jsonp.php 代码为

<?php header('Content-type: application/json'); //获取回调函数名
 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 
$json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 
echo $jsoncallback . "(" . $json_data . ")"; ?>