基本步骤:创建XMLHttpRequest对象-->配置发送参数-->执行发送-->处理响应

ajax 通俗讲有四个步骤

1.创建Ajax对象
2.链接到服务器
3.发送请求
4.接受返回值

1.创建对象
  var xhr = null;
    if(window.XMLHttpRequest){
        标准浏览器
        xhr = new XMLHttpRequest();
    }else{
        非标准浏览器IE6/7/8
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

对于前面要在if中加window判断是因为,浏览器会对未定义值的变量读取时报错 ,而对于window.variable不会报错,而是报undefined.

2.连接服务器

首先理解同步与异步
同步:事情一件一件来
异步:多件事情一起做
而ajax就是为了异步而生的,例如用户请求表单后,提交到服务器的过程,用户不用等待,可以干别的事情。。。。。。

   var type = 'get';
    var myurl = './data.php';
    var async = false;//第三个参数默认值就是true,表示异步;false表示同步
    xhr.open(type,myurl,async);
3发送请求
//发送请求
 var param = null;
  xhr.send(param);
4.接受请求

主要是判断浏览器和服务器的交互进度和结果

        xhr.onreadystatechange=function(){
//oAjax.readyState浏览器和服务器的交互情况
if(oAjax.readyState == 4)//读取完成
{
if(oAjax.status==200)//http状态码,用来判断是否成功接受并返回文件
{
alert(oAjax.status+" Success" +oAjax.responseText);//读取响应文件里面的TEXT
}else{
alert(oAjax.status+" NotFound");
}
}
};

A、处理响应中的status (xhr.status == 200 ):

xhr.status是http协议的状态码:200成功、404没有找到资源、500服务器报错

ajax清除缓存:

    //将文件名设置随系统时间改变而改变,这样可以避免浏览器缓存旧数据
oAjax.open('GET','./a.txt?t='+new Date().getTime(),true);

B、XMLHttpRequest取得响应:

(1)responseText:获得字符串形式的响应数据

(2)responseXML:获得xml形式的响应数据

(3)status和statusText:以数字和文本形式返回Http转态码

(4)getAllResponseHeader():获得所以得响应报头

(5)getResponseHeader():查询响应中的某个字段的值

(6)readState属性

"0"请求未初始化,open还未调用

"1":服务器连接已经建立,open已调用

"2":请求已接收,也就是接收到头信息了

"3":请求处理中,也就是接收到响应主体了

"4":请求已经完成,且响应就绪,响应完成了

C、注意事项:

    1、xhr的对象创建需要兼容处理
    2、xhr.open的3个参数的作用
    3、xhr.readyState状态值要了解
    4、通过xhr.responseText获取服务器响应的数据
    5、对于get请求来说,xhr.send()的参数固定写成null
    6、xhr.status和xhr.readyState的作用和区别

D、阻止表单提交的几种方式:

 1.return false;
 2.e.preventDefault();
 3. <input type="submit" value="提交" id="btn">把“submit”换成“button”

E、Ajax-get提交:

Aja的get提交数据是通过url传递参数,并且需要对参数进行编码处理
xhr.send();方法参数固定为null

2.配置发送函数
encodeURI作用对get参数进行编码处理,防止乱码
var param = encodeURI('?username='+uname+'&password='+pw);
xhr.open('get','./data.php'+param);
3.发送
xhr.send(null);

F、Ajax-post提交:

Ajax的post提交方式通过xhr.send();
函数传递的参数发送数据,而不是通过url传递数据
post提交方式必须设置请求头
post提交的数据不需要进行编码处理
2.配置发送函数
xhr.open('post','./33data.php');
//设置请求头信息(对于post提交必须设置请求头)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
3.发送
var param = 'username='+uname+'&password='+pw;
xhr.send(param);

G、post和get的区别:

get post
2.配置发送函数
            encodeURI作用对get参数进行编码处理,防止乱码
            var param = encodeURI('?username='+uname+'&password='+pw);
            xhr.open('get','./data.php'+param);
3.发送
            xhr.send(null);
2.配置发送函数
               xhr.open('post','./33data.php');
              设置请求头信息(对于post提交必须设置请求头)
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
3.发送
               var param = 'username='+uname+'&password='+pw;
               xhr.send(param);
 
1、Aja的get提交数据是通过url传递参数,并且需要对参数进行编码处理
2、xhr.send();方法参数固定为null
1、Ajax的post提交方式通过xhr.send();
函数传递的参数发送数据,而不是通过url传递数据
2、post提交方式必须设置请求头(   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); )
3、post提交的数据不需要进行编码处理

H、HTTP请求:是一种规则,无状态,无记忆:

HTTP请求过程

(1)建立TCP连接

(2)web浏览器向web服务器发送请求指令

(3)web浏览器发送请求头信息

(4)web服务器应答

(5)web服务器发送应答头信息

(6)web服务器向浏览器发送数据

(7)web服务器关闭TCP连接

I、HTTP请求的4个·组成部分:

a、HTTP请求方法或者动作(GET/POST)

b、正在请求的URL

c、请求头,包含客户环境信息、身份信息等

d、请求体(正文),包含客户提交的查询字符串信息、表单信息

J、POST和GET方法:

GET:(1)用于信息获取

(2)使用URL传递参数

(3)String<=2000个字符左右

POST:(1)用于修改服务器上的资源

(2)String<=无穷大

K、一个HTTP响应由三个部分组成:

a、一个数字和文字组成的转态码。作用:显示请求是否成功

b、响应头,包含服务器类型、日期、内容类型、长度等

c、响应体,即响应正文,字符串、HTML等

L、HTTP状态码由3个数字构成,其中首位数字定义了状态码的类型:

1^^:信息类,表示收到web请求,正在进行处理中

2^^:成功,表示用户请求被正确接收、理解和处理,如200

3^^:重定向,表示请求未成功,客户必须采取动作

4^^:客户端错误,客户提交的信息有误,如400

found:意味着请求中所引用的文档不存在

5^^:服务器错误(最难处理的问题),表示服务器不能完成请求处理,如500

Ajax实现异步请求的更多相关文章

  1. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  2. MVC的Ajax的异步请求

    MVC的Ajax的异步请求 在这里小写一下MVC的异步请求的一点小总结. 个人认为是有两种的,一种就是跟webform一样的,依旧是使用jQuery的$.get()方法,只是请求地址不同,webfor ...

  3. ajax 实现异步请求

    ajax实现异步请求: function onclicks() { $.ajax( { url:'../hhh/columnSearch.do',// 跳转到 action // data: {tab ...

  4. AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  5. AJAX发送异步请求教程详解

    AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...

  6. ajax的异步请求小结

    如何判断是使用json还是jsp的数据传输: json字符串可以使用js,jquery,ajax,java这几种技术,页面为jsp页面,json数据为java后台传递来. 1.同步请求可以从因特网请求 ...

  7. JQ+AJAX 发送异步请求

    1. load() ; 作用:通过ajax 请求从服务器加载数据,并添加到符合要求的节点上 用法:$node.load(请求地址,请求参数) 请求参数写法: --"username=admi ...

  8. ajax json 异步请求

    function ajaxTest(){ if (true) { $.ajaxSettings.async = false; var dataJson; $.getJSON("/univer ...

  9. AJax的异步请求

    AJax的处理过程 1、传统的Web请求过程: 一般的 Web 应用程序中,用户填写表单字段并单击 Submit 按钮.然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 PHP 或 J ...

  10. ajax发送异步请求

    一:得到XMLHttpRequest对象 ajax其实只需要学习XMLHttpRequest一个对象 大多数浏览器都支持: var xmlHttp = new XMLHttprequest(); IE ...

随机推荐

  1. php – cURL从重定向获取url

    我目前正在使用cURL尝试从网站刮刀的重定向获取URL.我只需要网站上的网址.我在过去几天研究过stackoverflow和其他网站,但都没有成功.我目前使用的代码来自这个网站: $url = &qu ...

  2. zabbix使用自动发现功能批量监控服务器端口的可用性

    使用自动发现脚本批量监控服务器端口的可用性 .编写自动发现脚本 # cat /usr/local/zabbix_agents_3.2.0/scripts/web_site_code_status.sh ...

  3. Android NDK编译选项设置

    Android NDK编译选项设置 网易加固关注 0.5472016.08.22 14:07:00字数 3,034阅读 6,805 在Android NDK开发中,有两个重要的文件:Android.m ...

  4. 比特币场外otc交流群908389290

    比特币场外otc交流群908389290,欢迎加入交流讨论-

  5. BeetlConfiguration扩展配置

    beetl拓展配置类,绑定一些工具类,方便在模板中直接调用 BeetlConfiguration.java public class BeetlConfiguration extends BeetlG ...

  6. 快速改变文件hash值的方法

    查看哈希值命令 Linux : md5sum + 文件名 $ md5sum .png fe5c3f5ef1d207bc1b646911b463c907 .png Windows : certutil ...

  7. An unexpected exception occurred while binding a dynamic operation 错误的一种情况

    这种错误,出现在dynamic传值的时候,无法动态访问变量. 出错原因是: 使用了嵌套类,class里面又定义了class

  8. SpringBoot示例教程(一)MySQL与Mybatis基础用法

    示例需求 在Springboot2框架中,使用Mysql和Mybatis功能:1. Mysql+Datasource集成2. Mybatis+XML用法详解 数据库准备 采用了Oracle中的scot ...

  9. Zabbix 3.0 配置企业微信报警(注册---测试)

    一.申请企业微信 1.登录企业微信官网,点击企业注册 二.配置企业微信 1.邀请管理员使用企业微信,如果有多个人直接添加新成员 2.管理员收到邀请,下载手机版企业微信,使用微信号登陆即可 3.创建应用 ...

  10. scala 样例类

    一.case class 的特征 package com.jason.qianfeng case class Message(sender: String, receiver: String, bod ...