1、js中ajax实现流程:

  (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.

  (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

  (3) 设置响应HTTP请求状态变化的函数.

  (4) 发送HTTP请求。

  (5) 获取异步调用返回的数据.

  (6) 使用JavaScript和DOM实现局部刷新.

2、创建XMLHttpRequest

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

创建XMLHttpRequest对象:

  var xmlhttp;

  if (window.XMLHttpRequest)

    {//兼容IE7+, Firefox, Chrome, Opera, Safari

   xmlhttp=new XMLHttpRequest(); }

  else

  {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  // 兼容 IE6, IE5}

3、向服务器发送请求:

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

  open(method,url,async);

  send(string);

  例如:

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

  xmlhttp.send();

  method:请求的类型;GET 或 POST

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

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

post和 get:

  与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:

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

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

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

4、设置响应HTTP请求状态变化的函数

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

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

  xmlhttp.onreadystatechange=function()

   {

   if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

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

    }

   }

 

5、服务器响应

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

来自服务器的响应并非XML时用responseText :

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

来自服务器的响应是XML是用responseXML :

  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;

转载于:https://www.cnblogs.com/flower-qh/p/7116309.html

浅谈AJAX基本实现流程相关推荐

  1. ajax感受,有什么缺点,浅谈ajax的优点与缺点

    AJAX (Asynchronous Javascript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验. 完全的AJAX应用给人以桌面应用的感觉.正如其他任何技术,A ...

  2. js 单页面ajax缓存策略,浅谈ajax的缓存机制---IE浏览器方面

    这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中给大家提到了Ajax解决浏览器的缓存问题,解决方法有很多种.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. IE浏览器对于同一 ...

  3. jquery ajax和servlet,浅谈ajax在jquery中的请求和servlet中的响应

    在jsp中,首先,你需要导入jquery的架包: 获取可返回站点的根路径: String path = request.getContextPath(); %> 在jquery中写ajax请求: ...

  4. ajax机制 缓存,浅谈Ajax的缓存机制

    浅谈Ajax的缓存机制 Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的. 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expi ...

  5. 浅谈AJAX并实现使用pagehelper-5.1.10.jar分页插件实现异步从数据库中获取数据分页显示

    AJAX异步请求 什么是ajax 异步 JavaScript 同步和异步的区别 同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于一个Java线程的操作. 异步方式:浏览器与服务器是并行操作, ...

  6. 浅谈ajax中get与post的区别,以及ajax中的乱码问题的解决方法

    一.谈Ajax的Get和Post的区别 Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及 ...

  7. 浅谈ajax使用方法

    众所周知,代码都是从上而下依次同步运行,同步的代码里面无法拿到异步的执行结果. Ajax概念 Ajax就是通过在后台与服务器进行少量数据交换,可以使网页实现异步更新的技术.这意味着可以在不重新加载整个 ...

  8. 浅谈ajax?贾克斯???

    ** 什么是ajax?以及它的作用? AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用 ...

  9. 浅谈ajax原理、优缺点

    ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请 ...

最新文章

  1. MySQL事务隔离级别介绍
  2. YII2框架表单-model(验证)-HTML_help部件 URL_help部件 以注册页面为实例
  3. SpringBatch读文件(FlatFileItemReader)写据库(MyBatisBatchItemWriter)(四)
  4. JVM—内存分配与回收策略
  5. 红橙Darren视频笔记 builder设计模式 navigationbar 导航栏第二版
  6. leetcode刷题:除自身以外数组的乘积
  7. webbench接口并发测试
  8. windows_xp_sp3下的php环境安装配置
  9. 在二维码中间添加logo或者图片
  10. UDS常用诊断服务介绍
  11. 微信小程序地图添加标记点
  12. JVM中的GC是什么
  13. 《研发企业管理——思想、方法、流程和工具》——第1章 企业管理基本理念 1.1 企业的根本目标及其内涵...
  14. 微信聊天记录没有备份可以恢复吗?吐血整理分享
  15. 那些看着高大上的名词
  16. 测试硬盘软件hd不能结束进程,终于解决了HD TUNE以及所有其他硬盘检测工具都不能使用的情况。。...
  17. 伯禹公益AI《动手学深度学习PyTorch版》Task 05 学习笔记
  18. GitHub 上值得收藏的100个精选前端项目!
  19. java inet aton_地址转换函数:inet_aton inet_ntoa inet_addr和inet_pton inet_ntop
  20. C++ OpenCV特征提取之KAZE和AKAZE的匹配

热门文章

  1. SVN工具的使用 和在Eclipse中安装GPD插件:(多步审批流,因此选择使用工作流(JBPM)来实现)...
  2. Silverlight数据加载时,等待图标显示与隐藏(Loading)
  3. 关于Update语句在不同数据库中的差别
  4. CentOS下用yum命令安装jdk
  5. python通过端口和协议查出服务名
  6. 黑马lavarel教程---13、分页
  7. Android性能测试-分析工具
  8. APICloud学习第二天——操作云数据库
  9. jsp(3,6,9) EL表达式及JSTL
  10. Python打包工具setuptools的使用