AJAX学习(1)

基础确认:HTML、CSS、JavaScript

AJAX可以:

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

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

异步和同步的区别

异步请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。一般默认值为true。异步请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。

同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,也就是说,当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面处于一个假死状态,当这个ajax执行完毕后才会继续运行其他代码页面解除假死状态(即当ajax返回数据后,才执行后面的function)。

方法 描述 open(

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

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)

send(

将请求发送到服务器。

  • string:仅用于 POST 请求

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

//创建 XMLHttpRequest 对象的语法
variable=new XMLHttpRequest();
//老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");

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

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

get和post发送带信息的区别

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

方法 描述 setRequestHeader(

向请求添加 HTTP 头。

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

现在基本上都不用这种原生的ajax了,框架内的更好用

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

属性 描述 responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML,请使用 responseText 属性。

responseText 属性返回字符串形式的响应,因此您可以这样使用:

XMLHttpRequest 对象的三个重要的属性:

属性 描述 onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

status 200: “OK”

404: 未找到页面

Original: https://www.cnblogs.com/Aons0812/p/16539594.html
Author: Aons谦
Title: AJAX学习(1)

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/594293/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球