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. 05 Django与Ajax

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

  2. Bootstrap 4 - Glyphicons migration?

     https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration Migrating from Glyphi ...

  3. java 常用API

    package com.orcal.demc01; public class Regex { public static void main(String[] args) { // TODO Auto ...

  4. Java导入Excel文件页面实现JS

    Excel导入: 页面创建导入按钮,如: 代码: <button class="layui-btn layui-btn-small layui-btn-primary ajax-all ...

  5. echart全局属性,自用,搜索比较快

    // 全图默认背景  // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd ...

  6. 修改linux新建账户时的过期时间

    #!/bin/bash cat << EOF >> /etc/login.defs PASS_MAX_DAYS 90 EOF

  7. jQuery选择器补充

    ---------------------------------------------------------------------------------------------------- ...

  8. python 中的一些小命令

  9. sql中自连接的使用

    一.用SQL自连接查询处理列之间的关系 SQL自身连接,可以解决很多问题.下面举的一个例子,就是使用了SQL自身连接,它解决了列与列之间的逻辑关系问题,准确的讲是列与列之间的层次关系.SQL代码如下: ...

  10. Hibernate-原生SQL查询

    HQL尽管容易使用,但是在一些复杂的数据操作上功能有限.特别是在实现复杂的报表统计与计算,以及多表连接查询上往往无能为力,这时可以使用SQL(Native SQL)实现HQL无法完成的任务. 1.使用 ...