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. Validate US Telephone Numbers FreeCodeCamp

    function telephoneCheck(str) { // 祝你好运 //var re = /^1? ?(\(\d{3}\)|\d{3})[ |-]?\d{3}[ |-]?\d{4}$/; / ...

  2. 别再问我ConcurrentHashMap了

    以下ConcurrentHashMap以jdk8中为例进行分析,ConcurrentHashMap是一个线程安全.基于数组+链表(或者红黑树)的kv容器,主要特性如下: 线程安全,数组中单个slot元 ...

  3. Project Euler 31 1000-digit Fibonacci number( DP )

    题意:在无限硬币的情况下能组成200的方案数有多少个 思路:DP,设数组 dp[ n ] [ k ] 代表前 n 种硬币能够组成 k 元的方案数,那么就能得到 dp [ n ] [ k ] = dp ...

  4. 51nod-完美字符串(贪心)

    约翰认为字符串的完美度等于它里面所有字母的完美度之和.每个字母的完美度可以由你来分配,不同字母的完美度不同,分别对应一个1-26之间的整数. 约翰不在乎字母大小写.(也就是说字母F和f)的完美度相同. ...

  5. 使用 Laravel 5.5+ 更好的来实现 404 响应

    译文首发于 使用 Laravel 5.5+ 更好的来实现 404 响应,转载请注明出处! Laravel 5.5.10 封装了两个有用的路由器方法,可以帮助我们为用户提供更好的 404 页面.现在,当 ...

  6. 【hdu 6333】Harvest of Apples

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 假设T[i][j]表示的是杨辉三角第i层前j项的和. 会发现它同样满足杨辉三角的性质. 即 T[i][j] = T[i-1][j-1 ...

  7. NYIST 119 士兵杀敌(三)

    士兵杀敌(三)时间限制:2000 ms | 内存限制:65535 KB难度:5 描述南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进行比较,计算出 ...

  8. ZOJ 2315 New Year Bonus Grant

    New Year Bonus Grant Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Or ...

  9. jdk环境变量设置理解

    1.系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0) 2.系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOM ...

  10. HDU 1215

    由算术基本定理, 直接使用公式就好 #include <iostream> #include <cstdio> #include <algorithm> #incl ...