AJAX全称: Asynchronous JavaScript and XML    ( 异步的JavaScript 和 XML)

Ajax的本质就是:XMLHttpRequest 对象;

    案例:

      var ajax=new XMLHttpRequest()

      console.log(ajax)

      从控制台中我们要学习三个属性和三个方法

      三个属性:

        readystate:状态的属性: 请求的5个阶段:0,1,2,3,4    只有最后一个阶段是成功的状态:前面的出错,都是前端的语法出错

        responseText:返回的文件内容

        status:状态码:200:成功了  404:表示文件没找到  5xx:代表服务器的问题  3xx:代表禁用的意思

      从__proto__中学习三个方法

        open()  向后台发送请求

        send()  发送

        onreadystatechange()  服务器响应

  Ajax=异步javascript和xml

  xml是一种数据存储格式    (不过由于为严格模式,对开发不友好,已被抛弃了)(必须是双标签)

  json  是一种数据存储格式:(简单,易操作,是当前最流行的)

  Ajax的工作原理:

  

  Ajax的使用方法:

  第一步: 创建XMLHttpRequest 对象:

  var xmlhttp=new XMLHttpRequest();

  第二步:给后台发送请求:

  xmlhttp.open(参数一,参数二,参数三)    参数一:请求的方式:get/post  参数二:后台的地址(类似于url)  参数三:同步/异步(true代表异步:false代表同步);

  第三步:发送:

  xmlhttp.send()  

  第四步:服务器响应:

  xmlhttp.onreadystatechange=function(){

    if(xmlhttp.readystate==4){

      if(xmlhttp.status==200){

        两个添加判断为:请求成功后,后台向客户端传入数据的阶段;

        将其封装成函数,用于数据处理

        fn(xmlhttp.responseText)

      }

    }

  }

  function fn(data){

    var arr=JSON.parse(data)        //JSON格式,后台传入的数据都是字符串  JSON字符串转换为JSON的格式用parse的方法;

    document.getElementById("div").innerHTML=arr[0].name;    在指定的元素下面插入从后台返回的数据

  }

  这就是Ajax的原理

ajax(2)的更多相关文章

  1. AJAX(一)

    AJAX(一) Ajax是Asynchronous Javascript和XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. [前面的基础知识][关于同步和异步的了 ...

  2. 又是一周-AJAX(三)

    hi 我又食言了,但我还是厚颜无耻的回来了... 1.AJAX(三) 三.AJAX的简单的例子 3.1 简介 完成:查询员工信息,通过输入员工编号查询员工的基本信息+新建员工的信息,包含员工姓名,编号 ...

  3. AJAX(二)AJAX框架

    上文(AJAX(一)AJAX的简介和基础)对ajax异步请求服务器做了详细的介绍和基础应用,可以看出,ajax的一些过程是相对不变的.不必要每次发送请求都写一遍发送代码,一些ajax开发人员已经把他们 ...

  4. Python开发【前端】:Ajax(二)

    原生Ajax.JQuery.伪Ajax三种方式使用优先级 如果发送的是[普通数据] jQuery XMLHttpRequest iframe 如果发送的是[文件] iframe jQuery(Form ...

  5. AJAX(XMLHttpRequest)进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

  6. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  7. js系列教程11-json、ajax(XMLHttpRequest)、comet、SSE、WebSocket全解

    js系列教程11-json.ajax(XMLHttpRequest).comet.SSE.WebSocket全解:https://blog.csdn.net/luanpeng825485697/art ...

  8. [YII2] 去除自带js,加载自己的JS,然后ajax(json)传值接值!

    本想用YII2自带的JS,可是用着效果不好,想从新加载,找了好多终于实现啦!还有ajax(json)传值接值! 首先直接了当的就把YII2自带的js去掉! 把下面代码加入到/config/main.p ...

  9. ASP.NET MVC之Unobtrusive Ajax(五)

    前言 这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive ...

  10. Ajax (一)

    Ajax:即异步的XML和Javascript,在不刷新和提交的情况下,页面局部更新,实现前后端分离. Ajax的核心对象是XMLHttpRequest,服务器通过xhr对象与浏览器异步通信 关于HT ...

随机推荐

  1. python复习2

    在操作字符串时,我们经常遇到str和bytes的互相转换.为了避免乱码问题,应当始终坚持使用UTF-8编码对str和bytes进行转换.

  2. Nodejs一键实现微信内打开网页url自动跳转外部浏览器访问的功能

    前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面 ...

  3. mysql命令行的导入导出sql,txt,excel(都在linux或windows命令行操作)(转自筑梦悠然)

    原文链接https://blog.csdn.net/wuhuagu_wuhuaguo/article/details/73805962 Mysql导入导出sql,txt,excel 首先我们通过命令行 ...

  4. Nginx的启动、停止和重启

    启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@sijizhen sbin]# /usr/local/nginx/sbin/nginx -c /usr/l ...

  5. requests库写接口测试框架初学习

    学习网址:    https://docs.microsoft.com/en-us/openspecs/windows_protocols/ms-dscpm/ff75b907-415d-4220-89 ...

  6. USACO15DEC最大流MaxFlow

    传送门 这是个假的最大流,其实是一个用树剖+线段树就能解决的事情 题目中的道路会对路径上的造成压力,最后询问最大的压力 其实就等价于对每条路径上的点加上 1 的权值,并且最后询问整个树中的最大值 然后 ...

  7. Python3学习笔记十五

    ---恢复内容开始--- 1.  jquery的属性操作  $().attr(属性名)    取值 $().attr(属性名,属性值)      赋值 <!DOCTYPE html> &l ...

  8. TCP和UDP的区别以及使用python服务端客户端简单编程

    一.TCP.UDP区别总结 1.TCP面向连接(如打电话要先拨号建立连接):UDP是无连接的,即发送数据之前不需要建立连接 2.TCP提供可靠的服务,也就是说,通过TCP连接传送的数据,无差错,不丢失 ...

  9. 想明白为什么C->D

    C公司为什么不行? 钱不够 第一个原因是在新世界,C能够给我的钱是远远低于市场价的.如果按照现公司的行情,也就一个社招人员的白菜价. 领导不行 C公司的领导,从面相上看就无法让我信服.领导力中下,忽悠 ...

  10. 自己动手造拖拉机轮子系列 -(react-loadable)

    最新消息:react官方已支持懒加载https://reactjs.org/docs/code-splitting.html#reactlazy 文章webpack分片chunk加载原理中深入探究了异 ...