diff --git "a/47\345\267\253\346\231\250\347\276\277/\347\254\224\350\256\260/11.29.Ajax.md" "b/47\345\267\253\346\231\250\347\276\277/\347\254\224\350\256\260/11.29.Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..3142ad40019a6fe1c13934a7248724b2eb45b908 --- /dev/null +++ "b/47\345\267\253\346\231\250\347\276\277/\347\254\224\350\256\260/11.29.Ajax.md" @@ -0,0 +1,63 @@ +#### Ajax + +Ajax是一种与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。 + +##### 原理 + +AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示 +Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。 +XMLHttpRequest是ajax的核心机制 + +##### 发送请求 + +创建XMLHttpRequest对象 + +```javascript +var xhr=new XMLHttpRequest(); +``` + + + +准备发送请求 open() + +```javascript +xhr.open('请求类型','url地址',是否异步); +``` + +请求类型 GET 或 POST + +url 文件在服务器上的地址 + +是否异步 true(异步) / false(同步) + + + +发送请求数据 send() + +```javascript +xhr.send(); +``` + + + +请求返回的回调函数 +当页面的加载状态发生改变的时候readyState属性就会跟随发生变化,而这时readystatechange属性所对应的回调函数就会自动被调用。 + +```javascript +xhr.onreadystatechange=function(){ + if(xhr.readyState==4 && xhr.status==200){ + console.log(xhr.responseText) + } +} + +``` + +readyState状态码 + +onreadystatechange 存储函数(或函数名),每当readyState属性改变时就会调用该函数 + +readyState 存有XMLHttpRequest的状态,从0-4发生变化 0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求 + +​ 处理中 4: 请求已完成且响应已就绪 + +status 200:‘OK’ 404:未找到页面 \ No newline at end of file