写上面那些都是因为对ajax不熟悉

从w3c抄写JS原生ajax的东西补充一些基础

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

variable=new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}
else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

XMLHttpRequest 对象用于和服务器交换数据。

向服务器发送请求

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

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async)

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

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

将请求发送到服务器。

  • string:仅用于 POST 请求

GET 还是 POST?

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

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 GET 请求:

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

在上面的例子中,您可能得到的是缓存的结果。

为了避免这种情况,请向 URL 添加一个唯一的 ID:

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息,请向 URL 添加信息:

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST 请求

一个简单 POST 请求:

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

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

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址:

xmlhttp.open("GET","ajax_test.asp",true);

该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

异步 - True 或 False?

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

xmlhttp.open("GET","ajax_test.asp",true);

对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

Async = true

当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Async = false

如需使用 async=false,请将 open() 方法中的第三个参数改为 false:

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。

请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

服务器响应

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

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

responseText 属性

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

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

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

responseXML 属性

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

请求 books.xml 文件,并解析响应:

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){txt=txt + x[i].childNodes[0].nodeValue + "<br />";}
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

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

每当 readyState 改变时,就会触发 onreadystatechange 事件。

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

下面是 XMLHttpRequest 对象的三个重要的属性:

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

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

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

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}

注释:onreadystatechange 事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):

function myFunction()
{
loadXMLDoc("ajax_info.txt",function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}});
}

转载于:https://www.cnblogs.com/mvv118/p/4155501.html

ajax、json一些整理(3)相关推荐

  1. laravel ajax返回json,Laravel validate error处理,ajax,json示例

    如下所示: public function updateLevelTestRecords(Request $request) { $rules = [ 'uid' => 'required|in ...

  2. ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例

    html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...

  3. struts2 ajax html,Struts2+Jquery+Ajax+Json

    现在使用Json来封装并且传递数据的情形是越来越多了,可怎么样在Struts2中来使用Jquery+Ajax+Json来协同工作呢?在网上查了下就那几个例子被转过来转过去的,还有很多例子根本行不通,这 ...

  4. AJAX+json+jquery实现预加载瀑布流布局

    AJAX+json+jquery实现预加载瀑布流布局 转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html

  5. struts2+ajax+json使用实例

    本文主要包含一个struts2+ajax+json的使用实例 步骤如下 1.准备工作 ①ajax使用Jquery:jquery-1.4.2.min.js ②struts2与json的依赖包:strut ...

  6. php ajax json 实例,php+ajax+json 详解及实例代码

    php+ajax+json 实例代码 html页面: $(function(){ $("#send").click(function(){ var cont = $("i ...

  7. ajax json的参数,java ajax json参数

    java ajax json参数 [2021-02-02 08:55:23]  简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&quo ...

  8. linux json 写sql注入,sql注入之AJAX(SQL Injection (AJAX/JSON/jQuery))

    sql注入之AJAX(SQL Injection (AJAX/JSON/jQuery)) 0x1 网上搜下没有关于ajax的sql注入文章,这里简单写一下抛砖引玉. 原理自己百度,这里简单说下: 通过 ...

  9. 购物车ajax php json,Ajax+json实现购物车结算

    这次给大家带来Ajax+json实现购物车结算,Ajax+json实现购物车结算的注意事项有哪些,下面就是实战案例,一起来看一下. 全选 商品 单价 数量 小计 操作 全选 删除选中产品 总价:¥0 ...

  10. http响应头类型json格式整理

    http响应头类型json格式整理 {".323": "text/h323",".3gp": "video/3gpp", ...

最新文章

  1. 如何使用Leangoo看板统计中的任务分布?
  2. python中 pip的安装方法
  3. 解决IDEA2020.1版本不兼容Lombok的问题
  4. linux实现自己的write函数,Linux 内核源码阅读 - write 系统调用的实现
  5. ES5 和ES6 继承机制
  6. nodejs返回html与vue,vuejs和nodejs的区别是什么?
  7. python切割图片文字_Python+opencv 实现图片文字的分割的方法示例
  8. QPG分布框架1.1.1
  9. 如何让 select的那个请选择不被选中.获取选中的value值和html
  10. 小学生python编程写游戏_用python教小孩子编程做游戏(上)
  11. 万能查询网址,不信试试看!
  12. 《阿里云服务器搭建》------ 安装jdk
  13. 如何在PDF中插入另一个PDF文件的页面
  14. office2016、visio2016和project2016安装指针
  15. mysql error 1837_MySQL复制错误1837的相关缺陷一例——insert delay在GTID下异常binlog格式...
  16. 蛮力枚举算法C语言,算法01-蛮力法
  17. 基于CNN的狗叫,猫叫语音分类
  18. 性能测试——深圳个贷营销项目出差总结
  19. 职业建议:辞职时提前通知很重要
  20. tp-link设置为中继模式

热门文章

  1. SetupDiGetClassDevs函数详解
  2. ios yymodel 将字典转数组模型_Python3 字典
  3. 数据库事务和spring事务的区别
  4. 027_自己实现一个ArrayList
  5. python tuple类型和list_Python 04_List 和 Tuple 类型
  6. html 中如何写js代码提示错误,javascript怎么进行错误处理?
  7. sqoop同步hdfs与mysql端口_使用Sqoop将数据在HDFS与MySQL互导
  8. python 结构体数组 定义_一篇文章弄懂Python中所有数组数据类型
  9. Java泛型应用详解
  10. 正则截取指定字符串 php,php截取指定字符串除了正则还有什么方法