chongxiaocheng
chongxiaocheng

原生JS Ajax操作

原生JS Ajax操作

 Ajax不是一个新技术！是前端页面与后台数据交互的一种手段

Ajax用在什么地方？
            需要用向服务器请求数据的环境中！

            核心：操作XMLHttpRequest对象
        操作步骤：
        **1. 创建XMLHttpRequest对象


        **2. 打开和服务器之间的连接，发送请求


        **3. 获取服务器返回的数据，DOM操作渲染到我们的网页中


   
   



       



你可能感兴趣的:(js-ajax)

  • JS-ajax详解 itsnekodeng学习技术博客 JS基础ajaxjavascriptcsshtml
    Ajax（AsynchronousJavascriptAndXML）注意同步和异步的区分同步sync：首先，JS是单线程的语言，所谓“单线程”就是一根筋，对于拿到的程序，一行一行的执行，前面的执行完成，后面的傻傻的等着。若前面的代码没执行完就会造成堵塞，后面的没法执行。异步async：而AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。异
  • 原生js-Ajax封装 学而时习之不亦说乎。 jsajaxjavascript服务器
    Ajax说道ajax到底什么是ajax？ajax是一种创建交互网页应用的一门技术。ajax的应用场景有：（地图）实时更新，表单验证等等....ajax的优缺点：优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制）2.一个Ajax请求多了，也会出现页面加载慢的情况。3.搜索引擎的支持程度比较低。4.ajax的安全性问题不太好
  • 2、关于使用ajax验证绕过（实例2） 你挡我发光了 web安全ajax前端javascriptweb安全网络安全
    ajax原理我上一篇有写过，参考：1、关于前端js-ajax绕过-CSDN博客一、实例环境：为手机上的某一割韭菜app二、目的：实现绕过手机验证码，找回密码三、工具：bp代理四、验证步骤如下：1、使用模拟器下载某app，使用bp代理模拟器流量，具体如何配置，我之前文章中有写过进入找回密码功能栏，首先使用接收正确的手机验证码，将正确的手机验证码提交，目的是当输入正确手机验证码时抓取服务器发返回app
  • 1、关于前端js-ajax绕过 你挡我发光了 web安全javascriptajaxweb安全网络安全
    1、Ajax知识、js--Ajax传统请求跟js--Ajax请求的差别在实例中用的上js-ajax的有表单验证：在用户填写表单时，可以使用Ajax在不刷新页面的情况下验证表单字段，并提供即时反馈。实时搜索：在搜索框中输入内容时，可以使用Ajax在用户输入的同时向服务器发送请求，动态获取搜索结果并更新页面。提交表单：在用户提交表单时，使用Ajax可以异步发送表单数据到服务器，同时在后台进行处理，而不
  • ajax封装-jq，js 南浔_029f
    Js-ajax//请求的5个阶段，对应readyState的值//0:未初始化，send方法未调用；//1:正在发送请求，send方法已调用；//2:请求发送完毕，send方法执行完毕；//3:正在解析响应内容；//4:响应内容解析完毕；functionajax(url,succ,faild){if(window.XMLHttpRequest){varxhr=newXMLHttpRequest()
  • JS-AJAX 饥人谷_踌躇
    AJAX介绍全称AsynchronousJavascriptAndXML（异步的JavaScript和XML）简介:AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。应用场景1.场景1.数据验证2.场景2.按需取数据3.场景3.自动更新页面创建ajax的步骤1.创建XMLH
  • 6、JS-AJAX 勒布朗-前端 JSajaxfirefoxservlet
    6.3、AJAX6.3.1、AJAX概述传统的web交互是用户触发一个http请求服务器，然后服务器收到之后，在做出响应到用户，并且返回一个新的页面，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务
  • 【经验总结】js关闭当前页面/关闭当前窗口(兼容所有浏览器) weixin_33733810
    http://www.111cn.net/wy/js-ajax/50225.htm关闭窗口转载于:https://www.cnblogs.com/zhp404/articles/4584132.html
  • JS-ajax 这很重要吗
    json解析##eval不检查数据是否合法json.pasrse检查数据是否合法在线json格式化校验工具：jsonlint.comPaste_Image.pngPaste_Image.pngeval不会执行数据的检查，直接执行alert语句JSON.parse()会报错，更加的安全Paste_Image.png请求方法改进：1、服务器端返回JSON字符串：header("Content-Type
  • 简单的hibernate环境搭建、自动生成model/配置/hibernate.xml配置文件 不想丶路过 hibernate学习笔记
    自己亲测的东西才是最有效果的，下面贴出整个编写的过程。1hibernate环境搭建，这个博客非常给力：http://www.111cn.net/wy/js-ajax/93142.htm需要用到的jar包：2使用myeclipse自动生成model/model配置文件/hibernate.xml配置文件，详细步骤点开下面链接：http://jingyan.baidu.com/article/27fa
  • JS-Ajax Init1al-Z 学习感悟前端
    使用原生JSfunctionrefresh(){varxmlhttp;if(window.XMLHttpRequest){//创建XMLHttpRequest对象xmlhttp=newXMLHttpRequest();}else{//老版本的InternetExplorer（IE5和IE6）使用ActiveX对象xmlhttp=newActiveXObject("Microsoft.XMLHTTP
  • 获取指定字符前/后的字符串 蜗牛慢慢向上爬 js
    http://www.111cn.net/wy/js-ajax/53474.htm代码如下复制代码/*string字符串;str指定字符;split(),用于把一个字符串分割成字符串数组;split(str)[0],读取数组中索引为0的值（第一个值）,所有数组索引默认从0开始;*/functiongetStr(string,str){varstr_before=string.split(str)[
  • JS-AJAX 渝聆墨
    AJAX等于异步javascript+XML;一，创建对象：varrequest;if(window.XMLHttpRequest){request=newXMLHttpRequest();}else{request=newActiveXObject("Microsoft.XMLHTTP");}二，请求request.open(method,url,async);method:GET/POSTas
  • js中Math.random()生成指定范围数值的随机数 weixin_34268610
    http://www.111cn.net/wy/js-ajax/57062.htmMath.random()这个方法相信大家都知道，是用来生成随机数的。不过一般的参考手册时却没有说明如何用这个方法来生成指定范围内的随机数。这次我就来详细的介绍一下Math.random()，以及如何用它来生成制定范围内的随机数。w3school的random()教程定义和用法random()方法可返回介于0~1之间
  • 解决在IE浏览器中返回json格式的数据时提示下载办法 weixin_30595035
    转载：http://www.111cn.net/wy/js-ajax/76891.htm发现一个其怪的问题生成的json数据格式的文件在ie浏览器会自动下载json格式文件了，那么这种问题如何来解决下面一起来看看在IE浏览器中返回json格式的数据时提示下载问题．问题：用jquery.form.js异步提交表单时，接收的是JSON格式的数据，但是奇怪的是在IE中提示下载文件，其他浏览器中一切正常，
  • AJAX-CORS 跨域 saint-zhang
    1、CORS就是一套AJAX跨域问题的解决方案。2、CORS的原理:CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。3、CORS浏览器支持情况：Chrome3+Firefox3.5Opera12+Safari4+IE8+4、JS-Ajax相关：ajax({url:"XXXX",//请求urlmethod:options.type,//请求方式data:{"data":"XXXX"},/
  • 原生js-ajax的两种请求数据方式 木易先生灬
    兼容低版本IE(方式一)functioncreatAJAX(){//定义对象varajaxObj;//创建对象if(window.XMLHttpRequest){//W3C的标准浏览器ajaxObj=newXMLHttpRequest();}else{//低版本的IEvarversionArray=["Microsoft.XMLHTTP","Msxml2.XMLHTTP","Msxml2.XMLH
  • JS-ajax实践 饥人谷_海瀚
    1.ajax是什么？有什么作用？AJAX的全称是AsynchronousJavaScriptandXML（异步的JavaScript和XML），ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。ajax的优点：(1)、最大的一点是页面无刷新，用户的体验非常好。(2)、使用异步方式与服务器通信，具有更加迅速的响应能力
  • 获取指定字符前/后的字符串 A9925
    http://www.111cn.net/wy/js-ajax/53474.htm代码如下复制代码 /*  string字符串;  str指定字符;  split(),用于把一个字符串分割成字符串数组;  split(str)[0],读取数组中索引为0的值（第一个值）,所有数组索引默认从0开始;  */functiongetStr(string,str){    varstr_before=str
  • jQuery+easing缓动的动画 jquery
    jQuery实现动画再简单不过了，只是要实现更酷的效果还需要插件来帮忙，easing就是一款帮助jQuery实现缓动动画的插件，经过试用，效果很不错，记录一下使用方法吧！ 下载该插件：jquery.easing.1.3.js　jquery.easing.compatibility.js 演示地址：http://www.11gz.com/demo/js-ajax/easing/index.htm
  • js-ajax实例 cwj649956781 js
    functionajax(url,onsuccess){  varxmlhttp=window.XMLHttpRequest?newXMLHttpRequest():newActiveXObject('Microsoft.XMLHTTP');//创建XMLHTTP对象，考虑兼容性。XHR  xmlhttp.open("POST",url,true);//“准备”向服务器的GetDate1.ashx
  • jquery/js获取当前页面url地址程序代码 zhibin07 jquery
    转自：http://www.111cn.net/wy/js-ajax/52767.htm 本文章来给各位同学介绍关于jquery/js获取当前页面url地址程序代码，在jquery与js中获取当前页面url方法是一样的，因为jquery没有自己相关的函数哦，都是使用js windows方法来获取。 设置或获取对象指定的文件名或路径。 window.location.pathname 设置
  • js刷新页面location.reload()用法介绍 zjhdreams 浏览器reload
    http://www.111cn.net/wy/js-ajax/45639.htm---------------------------------------------window.location.href=window.location.href;window.location.reload;经测试,这两句在某些情况下可以代替location.reload(true);而不会出现重试对话框
  • javascript this关键字用法介绍 talentluke JavaScript
    源于http://www.111cn.net/wy/js-ajax/42715.htm 函数 首先,让我们看看”函数”:  代码如下 复制代码 function introduce() {      alert("Hello, I am Laruencern"); }< li>
  • 强悍的js（window.event.srcElement）--快捷键 yang7527
    阅读更多强悍的js（window.event.srcElement）--快捷键已有904次阅读2009-4-2314:58|个人分类:js-ajax总结|event对象指当前触发的事件对象,window.event.srcElement是指触发事件的对象。比如你设定document.onclick=myfunc;这时所有页面点击的事件都交给myfunc处理，在myfunc函数里可以写vSrc=wi
  • 强悍的js（window.event.srcElement）--快捷键 yang7527 element
    强悍的js（window.event.srcElement）--快捷键 已有 904 次阅读2009-4-23 14:58 |个人分类:js-ajax总结| event对象指当前触发的事件对象,   window.event.srcElement是指触发事件的对象。比如你设定document.onclick   =   myfunc;这时所有页面点击的事件都
  • jQuery 键盘事件keydown ,keypress ,keyup介绍 107x jsjquerykeydownkeypresskeyup
    本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      
  • AngularJS中的Promise bijian1013 JavaScriptAngularJSPromise
    一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
  • c++ 用数组实现栈类 CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
  • java和c语言的雷同 麦田的设计者 java递归scaner
    软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi
  • LINUX环境并发服务器的三种实现模型 被触发 linux
    服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
  • Oracle数据库查询指令 肆无忌惮_ oracle数据库
    20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp  
  • ext右下角浮动窗口 知了ing JavaScriptext
    第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
  • 浅谈REDIS数据库的键值设计 矮蛋蛋 redis
    http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
  • maven编译可执行jar包 alleni123 maven
    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
  • 人力资源在现代企业中的作用 百合不是茶 HR 企业管理
    //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
  • Linux自启动设置详解 bijian1013 linux
    linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
  • Spring Aop Schema实现 bijian1013 javaspringAOP
    本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
  • 【Gson七】Gson预定义类型适配器 bit1129 gson
    Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
  • 【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
    在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义
  • linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
    一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位
  • java-两种方法求第一个最长的可重复子串 bylijinnan java算法
    import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
  • Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan javanetty
    Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo
  • servelt filter listener 的生命周期 cngolon filterlistenerservelt生命周期
    1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
  • jmpopups获取input元素值 ctrain JavaScript
    jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(
  • vi查找替换命令详解 daizj linux正则表达式替换查找vim
    一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En
  • 对网站中的js,css文件进行打包 dcj3sjt126com PHP打包
    一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
  • php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
    在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
  • linux 文件格式（1） sed工具 eksliang linuxlinux sed工具sed工具linux sed详解
    转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
  • Android应用程序获取系统权限 gqdy365 android
    引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点
  • HoverTree开发日志之验证码 hvt .netC#asp.nethovertreewebform
    HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
  • JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
    译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，
  • 数据结构随记_2 lx.asymmetric 数据结构笔记
    第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n
  • Linux下的监控工具dstat 网络接口 linux
    1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
  • C 语言初级入门--二维数组和指针 1140566087 二维数组c/c++指针
    /* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：
  • 10点睛Spring4.1-Application Event wiselyman application
    10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他