Ajax快速入门

Stella981
• 阅读 655

最近需要使用ajax,json传数据,快速学习了下ajax,把基本的东西拿出来分享一下,打算以问题的形式来进行文章的编写~go!

(一)什么是Ajax?

Ajax是一种无需加载整个网页,快速刷新局部网页的技术。Ajax不是新的编程语言,而是一些老技术的融合。

(二)Ajax用到了什么技术?

异步数据获取技术:使用XMLHttpRequest

基于标准的表示技术(即静态页):使用XHTML和CSS

动态显示和交互技术:使用Document Object Model(DOM)

数据互换和操作技术:使用XML与XSLT,现在流行的还有JSON

javascript:作为胶水语言将上述技术融合在一起

基本上也可以说,Ajax全是用javascript编写的~~

(三)什么是XMLHttpRequest?

XMLHttpRequest对象是Ajax的核心,现在的浏览器都支持这个对象,XMLHttpRequest对象用于在后台与服务器交换数据

(四)如何XMLHttpRequest对象?

对应于不同的浏览器,有不同的创建方法。

现在的浏览器,都可通过

[javascript] view plain copy print ? Ajax快速入门  Ajax快速入门

  1. <span style="font-size: 18px;"> var xmlhttp = new XMLHttpRequest();

    var xmlhttp = new XMLHttpRequest();

来创建XMLHttpRequest对象~!

而对于IE5,IE6等老版本浏览器,则使用

[javascript] view plain copy print ? Ajax快速入门  Ajax快速入门

  1. <span style="font-size: 18px;"><span style="font-family: Arial; background-color: rgb(255, 255, 255);">             var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

来创建~

下面这串代码是一个通用的解决办法,可以满足根据不同浏览器调用不同的XMLHttpRequest对象

[javascript] view plain copy print ? Ajax快速入门  Ajax快速入门

  1. <span style="font-size: 18px;"> var xmlhttp;
  2. if (window.XMLHttpRequest)
  3. {// code for IE7+, Firefox, Chrome, Opera, Safari
  4. xmlhttp=new XMLHttpRequest();
  5. }
  6. else
  7. {// code for IE6, IE5
  8. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  9. }
  10. 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"); }

(五)如何向服务器发送请求?

通过XMLHttpRequest对象的open()方法和send()方法,即可向服务器发送请求

open(method,url,async)方法,

_method_:请求的类型;GET 或 POST

_url_:文件在服务器上的位置

_async_:true(异步)或 false(同步)

send(string)方法

_string_:仅用于 POST 请求

先看看get请求~

[javascript] view plain copy print ? Ajax快速入门  Ajax快速入门

  1. <span style="font-size: 18px;"> xmlhttp.open("GET","demo_get.asp",true);

  2. xmlhttp.send();

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

再看看POST请求~

[javascript] view plain copy print ? Ajax快速入门  Ajax快速入门

  1. <span style="font-size: 18px;"> xmlhttp.open("POST","demo_post.asp",true);

  2. xmlhttp.send();

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

其实两者差不多对吧?POST是可以传递数据的,怎么传?

[javascript] view plain copy print ? Ajax快速入门  Ajax快速入门

  1. <span style="font-size: 18px;"> xmlhttp.open("POST","ajax.jsp",true);
  2. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  3. xmlhttp.send("fname=steven&lname=Jobs");
  4. xmlhttp.open("POST","ajax.jsp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=steven&lname=Jobs");

异步传输async参数请填写true~

(六)POST和GET有什么不同?

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

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

无法使用缓存文件(更新服务器上的文件或数据库)

向服务器发送大量数据(POST 没有数据量限制)

发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

GET其实并不常用,因为GET属于明文传输,不安全~

(七)怎么接受服务器的响应?

只需要使用到XMLHttpRequest的两个属性,分别是responseText和responseXML

看名字就知道,他们分别对应的是 普通文本 和 XML文件~

代码如下,只需替换最后的responseText为responseXML即可接受并解析XML文件~

[javascript] view plain copy print ? Ajax快速入门  Ajax快速入门

  1. <span style="font-size: 18px;"> document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

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

(八)关于回调函数onreadystatechange是怎么回事“

           当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

           readyState的5种状态:

                0: 请求未初始化

                1: 服务器连接已建立

                2: 请求已接收

                3: 请求处理中

                4: 请求已完成,且响应已就绪

[javascript] view plain copy print ? Ajax快速入门  Ajax快速入门

  1. xmlhttp.onreadystatechange=function()
  2. {
  3. if (xmlhttp.readyState==4 && xmlhttp.status==200)
  4. {
  5. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  6. }
  7. }
xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
     }

上面就是AJAX最基本的内容,了解这些,再看两个实例,就可以去学习AJAX的框架了~

AJAX的框架发展到现在实在太多了,这里建议使用jquery~

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
java第五周
AJAX的工作原理及其工作原理:1.定义及工作原理  AJAXAsynchronousJavaScriptandXML(异步的JavaScript和XML)。AJAX不是新的编程语言,而是一种使用现有标准的新方法。AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。  AJAX是一种用于
Stella981 Stella981
3年前
AjaxPro.dll,asp.net 前台js调用后台方法(无刷新)
1、什么是AjaxAjax是异步Javascript和XML(AsynchronousJavaScriptandXML)的英文缩写。"Ajax"这个名词的发明人是JesseJamesGarrett,而大力推广并且使Ajax技术炙手可热的是Google。Ajax的核心理念在于使用XMLHttpRequest对象发送异步请求。
Stella981 Stella981
3年前
AJAX与Django
AJAX什么是AJAX?AJAX不是JavaScript的规范,它的缩写:AsynchronousJavaScriptandXML,意思就是用JavaScript执行异步网络请求。提交任务之后,不原地等待,直接执行下一行代码,任务的返回通过回调机制。局部刷新,不整体刷新,而是界面莫个地方局部刷新AJAX原理
Stella981 Stella981
3年前
Django的日常
\toc\Django的日常AJAXAJAX简介首先AJAX是一种无需重新加载整个网页的前提下,能够更新部分网页的技术,他并不是一种新的编程语言,而是一种使用现有标准的新方法,是基于原生JavaScript开发的,他可以用于创建快速动态网页.AJAX最大的特点就是局部刷新以及异步提交,局部刷新
Stella981 Stella981
3年前
Ajax异步请求
Ajax即"AsynchronousJavascriptAndXML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax异步JavaScript和XML(标准通用标记语言的子集)。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这