AJAX学习(1)

基础确认：HTML、CSS、JavaScript
AJAX可以：

• 不刷新页面更新网页
  
• 在页面加载后从服务器请求数据
  
• 在页面加载后从服务器接收数据
  
• 在后台向服务器发送数据   
  

Ajax 的核心是 XMLHttpRequest 对象,用于和服务器交换数据。

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

复制代码

异步和同步的区别
  异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
  同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于是排队，也就是说，当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个ajax执行完毕后才会继续运行其他代码页面解除假死状态（即当ajax返回数据后，才执行后面的function）。
方法描述open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。

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

send(string)将请求发送到服务器。

• string：仅用于 POST 请求
  

一般建议使用post方式，get方式有概率获取到的是缓存里面的结果

1. //创建 XMLHttpRequest 对象的语法
2. variable=new XMLHttpRequest();
3. //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
4. variable=new ActiveXObject("Microsoft.XMLHTTP");

复制代码

当然也可以避免这个情况， 在URL 添加一个唯一的 ID既可以避免

1. xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
2. xmlhttp.send();

复制代码

 get和post发送带信息的区别

1. //get
2. xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
3. xmlhttp.send();
4. //post
5. xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
6. //设置请求头
7. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
8. //post内容，键值对，& 符号分割
9. xmlhttp.send("fname=Henry&lname=Ford");

复制代码

方法描述setRequestHeader(header,value)向请求添加 HTTP 头。

• header: 规定头的名称
  
• value: 规定头的值
  

 现在基本上都不用这种原生的ajax了，框架内的更好用
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性描述responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。 
responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：

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

复制代码

 
当请求被发送到服务器时，我们需要执行一些基于响应的任务XMLHttpRequest 对象的三个重要的属性：
属性描述onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

• 0: 请求未初始化
  
• 1: 服务器连接已建立
  
• 2: 请求已接收
  
• 3: 请求处理中
  
• 4: 请求已完成，且响应已就绪
  

status200: "OK"
404: 未找到页面 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！