【无标题】

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

KDLG_LG

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

阅读量45

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/KDLG_LG/article/details/123336913

版权

1.Ajax介绍

1.1定义

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

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

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

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

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

1.2ajax同步和异步区别

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

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

jquery 的 async:false,这个属性

默认是true：异步，false：同步。

1.3ALAX的原理

2.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();

3.Ajax语法

3.1XHR创建对象

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");

}

3.2像服务器发送请求

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

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

2、GET 还是 POST？

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

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

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

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

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

3.3服务器响应

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

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

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

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

4. Ajax的onreadystatechange事件

4.1onreadystatechange事件定义

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

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

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

4.2XMLHttpRequest对象的属性

5.jQuery Ajax介绍

5.1定义

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

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

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

6.jQuery load() 方法

6.1load()方法

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>

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

6.2load()方法回调

可选的 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);

});

});

7.jQuery$.get()方法

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

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

$("button").click(function(){

$.get("demo_test.php",function(data,status){

alert("数据: " + data + "\n状态: " + status);

});

})

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

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

8.jQuery$.post()方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$("button").click(function(){

$.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){

alert("数据: \n" + data + "\n状态: " + status);

});

});

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

可选的 data 参数规定连同请求发送的数据。

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

9.$ajax()

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

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

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

$("button").click(function(){

$.ajax({url:"demo_test.txt",success:function(result){

$("#div1").html(result);

}});

});+

url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }

success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this; //调用本次ajax请求时传递的options参数
         }

error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

10.JSON

10.1JSON定义

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>

10.2JSON语法

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

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

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

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" }

];