AJAX学习笔记--慕课网Ajax

ゞ浴缸里的玫瑰 2022-09-21 11:50 206阅读 0赞

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。  
AJAX是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面情况下更新部分网页。

**同步：**  
![这里写图片描述][20160619095338877]  
**异步**  
![这里写图片描述][20160619095401127]  
XMLHttpRequest 用于在**后台与服务器交换数据**。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。  
1.创建XMLHttpRequest对象

var xmlhttp;
    if (window.XMLHttpRequest)
      {
       // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();//创建一个对象
      }
    else
      {
       // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

2.HTTP 请求  
http：无状态协议(没有记忆)，不建立持久连接  
![这里写图片描述][20160619100012442]  
![这里写图片描述][20160619100107651]  
*GET和 POST*  
get:一般用于查询  
![这里写图片描述][20160619100332873]  
![这里写图片描述][20160619100604080]  
**状态码**  
![这里写图片描述][20160619100810853]  
3.向服务器发送请求

xmlhttp.open("GET","test1.txt",true);//method请求类型：GET或POST,url:文件在服务器上的位置，async:true(异步)或false(同步)
    xmlhttp.send(sring);//string仅用于POST请求

与POST相比，GET更简单也更快，并且大部分情况下都能用。  
*以下情况请使用POST：*  
无法使用缓存文件（更新服务器上的文件或数据库）  
向服务器发送大量数据（POST没有数据量限制）  
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠  
**GET请求**

xmlhttp.open("GET","demo_get.asp",true);
    xmlhttp.send();

4.XMLHttpRequest取得相应  
![这里写图片描述][20160619101432918]  
![这里写图片描述][20160619101514324]

var request=new XMLHttpRequest();//创建对象
    request.open("GET","GET.php",true);
    request.send();
    request.onreadystatechange=function(){ 
    if (request.readyState===4&&request.status===200)//响应完成请求成功
    {
     reuqest.responseText；//做的事情
    }
    }

5.实例  
![这里写图片描述][20160619104120977]  
6.JSON  
JSON:JavaScript对象表示法（JavaScript Object Notation）  
JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成。  
JSON是独立于语言的，长度短，读写快，使用JavaScript内建的对象解析  
![这里写图片描述][20160619105800655]

"name":"刘小妞"

eval, JSON.parse解析JSON  
7.j Query实现Ajax  
![这里写图片描述][20160619110348957]  
![这里写图片描述][20160619110824057]  
8.  
协议，子域名，主域名，端口号任何一个不同都算是跨域。  
![这里写图片描述][20160619111140061]  
![这里写图片描述][20160619111329145]  
![这里写图片描述][20160619111637522]  
![这里写图片描述][20160619112234591]

[20160619095338877]: /images/20220721/d022eafd5b4043b6ac1af1a0e55d1e7d.png
[20160619095401127]: /images/20220721/d5b136f1fb22416596c2e63bda62acbe.png
[20160619100012442]: /images/20220721/1824c71fc75d44a29d24dae9baded379.png
[20160619100107651]: /images/20220721/3738ffd73c5b4e10a6ddd240d148fbf4.png
[20160619100332873]: /images/20220721/98eb9c18694e4d068aa6bd11ebfac557.png
[20160619100604080]: /images/20220721/1758aa40a1a64557bf623cd898371991.png
[20160619100810853]: /images/20220721/50f6f93c1d03449bbac358ebcdcc4f54.png
[20160619101432918]: /images/20220721/92d313e31d8c4d8f947a55bc6236c9d4.png
[20160619101514324]: /images/20220721/9c9ca4b83dc64f8b82130f3267ed0464.png
[20160619104120977]: /images/20220721/5b7334b2a84b428886f35613af1e2aeb.png
[20160619105800655]: /images/20220721/91d14ade524f4eddbf49f6fb121bda8b.png
[20160619110348957]: /images/20220721/1096c328f8bc47c488b36066f91f5d30.png
[20160619110824057]: /images/20220721/319b4bd1ae914ce7b42a46f381a04ac1.png
[20160619111140061]: /images/20220721/f96dd449dc0140f794b250c4573ab60d.png
[20160619111329145]: /images/20220721/e04329bc7d67435180fbdb64fae9dd0d.png
[20160619111637522]: /images/20220721/f673bae8a1984a8baa0c2af58922c72a.png
[20160619112234591]: /images/20220721/e3b7144af54c42d48a2b0a6cbcffcff3.png