AJAX开发步骤

步一:创建AJAX异步对象,例如:createAJAX()

步二:准备发送异步请求,例如:ajax.open(method,url)

步三:如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader()

如果是GET请求的话,无需设置设置AJAX请求头

步四:真正发送请求体中的数据到服务器,例如:ajax.send()

步五:AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数

步六:在无名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面

一:知道ajax实现步骤

  创建对象 --准备发送--发送请求--监听服务

二:注意细节

  创建对象的时候分浏览器

    ie之前版本var ajax = new ActiveXObject("microsoft.xmlhttp")

    火狐 浏览器 var ajax = new XMLHttpRequest();

  准备发送的时候有两个参数method(get,post)和url(相当于form中的action)

  发送方法名为send若为get方式写入null(因为get方式提交在请求行中请求体为null)

  监听服务端响应的状态需要判断因为不知道是错误信息还是正确的信息

    ajax.onreadystatechange = function(){

      if(ajax.readystate==4){//监听状态码为4

        if(ajax.status==200){

          //获取正确的信息

         var str = ajax.responseText;//获取响应后的html数据(可在servlet中设置response.setContextType("text/html;charset=utf-8")

         document.getElementById("id名").innerHTML=str;//初始化

        }

      }

    }

ie浏览器解析的时候地址栏不会变化发送不到servlet中所以要在地址后面加入可变且不唯一的数(new Date().getTime()获取当前的毫秒数)

onreadystatechange状态变化有几种

ajax第一天总结的更多相关文章

  1. day72 Ajax 第一天

    第一个示例:(i1+i2 ) 前端数据 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. [妙味Ajax]第一课:原理和封装

    知识点总结: ajax是异步的javascrip和xml,用异步的形式去操作xml 访问的是服务端,即https://127.0.0.1/ 或者 https://localhost 1.创建一个aja ...

  3. Ajax第一天——入门与基本概念

    什么是Ajax Ajax被认为是(Asynchronous JavaScript and XML的缩写).异步的js和xml 异步和同步:同步->类似打电话,接完一个再接下一个:异步:-> ...

  4. ajax 第一个程序

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. Ajax第一课

    <script language="javascript"></script> Javascript 函数创建     function 函数名(){    ...

  6. springmvc+ajax——第一讲(搭建)

    下面是整个整合测试的代码: ajax01.html TestController web.xml springmvc.xml applicationContext.xml <!DOCTYPE h ...

  7. 【JavaScript】--ajax

    1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传 ...

  8. 四步完成ajax的使用

    什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 如何使用ajax? 第一步,创建xmlhttprequest对象,var xmlhttp ...

  9. ajax 基础教程

    这是一本什么书?这是一本技术类的书籍,主要从历史.XMLHttpRequest对象.怎么样于服务器交互.构建完备的Ajax开发工具箱.使用jsUnit测试javascript 代码,总之就是让我们从这 ...

随机推荐

  1. jemeter安装步骤

    1.jmeter下载地址:http://jmeter.apache.org/download_jmeter.cgi 2.在安装jmeter之前首先要安装jdk1.8以上版本,朋友们,千万不要忘了 jd ...

  2. HDU 5322 Hope (分治NTT优化DP)

    题面传送门 题目大意: 假设现在有一个排列,每个数和在它右面第一个比它大的数连一条无向边,会形成很多联通块. 定义一个联通块的权值为:联通块内元素数量的平方. 定义一个排列的权值为:每个联通块的权值之 ...

  3. BZOJ 3774 最优选择 (最小割+二分图)

    题面传送门 题目大意:给你一个网格图,每个格子都有$a_{ij}$的代价和$b_{ij}$的回报,对于格子$ij$,想获得$b_{ij}$的回报,要么付出$a_{ij}$的代价,要么$ij$周围四联通 ...

  4. https自签证书

    linux自带openssl,所以最好在linux平台操作 第一步:生成采用des3算法保护的私钥:openssl genrsa -des3 -out private-rsa.key 1024 命令执 ...

  5. 关于C++构造函数一二

    关于构造函数的调用顺序: 1.继承关系 2.从属关系 3.static声明的从属关系 关于拷贝构造函数的声明: classname(const classname & rhs) #includ ...

  6. hive join 优化 --小表join大表

    1.小.大表 join 在小表和大表进行join时,将小表放在前边,效率会高.hive会将小表进行缓存. 2.mapjoin 使用mapjoin将小表放入内存,在map端和大表逐一匹配.从而省去red ...

  7. VC6 编译和使用 STLPort

    1.下载 STLport:   http://www.stlport.org/   http://downloads.sourceforge.net/project/stlport/STLport/S ...

  8. Photon + Unity3D 线上游戏开发 学习笔记(一)

    大家好. 我也是学习Photon + unity3D 的新手 有什么说错的地方大家见谅哈. 我的开发环境是 unity3D 4.1.3  ,   Visual Studio 是2010 版本号的  p ...

  9. Android studio 自己主动排版

    一開始非常纠结于Android studio怎样有快捷键自己主动排版换行.找了网上非常多的快捷键并没实用.有说ctrl+shift+L的,我试了试全然没用.只是最后我还是找到了一个最好的办法.事实上有 ...

  10. DISCUZ站点DIY后,导致DIY功能失效,无法在前台删除已创建的DIY功能解决的方法

    DISCUZ站点DIY后.导致DIY功能失效,无法在前台删除已创建的DIY功能解决的方法.这是一个常常会遇到的问题.在程序调试过程中常常的会遇到这种问题.这里提供一个自己常常使用的解决的方法,供遇到这 ...