ajax编程

即 Asynchronous [e‘s??kr?n?s] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

1、 异步

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

其优势在于不阻塞程序的执行，从而提升整体执行效率。

XMLHttpRequest可以以异步方式的处理程序。

2、 XMLHttpRequest

浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。

/*初始化 XMLHttpRequest  可以以异步方式的处理程序*/var xhr = new XMLHttpRequest();
/*js 内置的 http 请求对象  XMLHttpRequest*//*1.怎么使用 这个内置对象*/var xhr = new XMLHttpRequest;

    /*2.怎么样去组请求*//*请求的行*/
    xhr.open(‘post‘,‘01.php‘);

    /*请求头*///get  没有必要设置//post 必须设置 Content-Type: application/x-www-form-urlencoded
    xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);

    /*请内容*//*3.发送请求*/
    xhr.send("name=xjj&age=10");
2.1、请求

HTTP请求3个组成部分与XMLHttpRequest方法的对应关系

1、请求行

/*设置请求行*//*第一个参数是请求的方式  第二个参数是请求的地址*/ 第三个参数是是否异步（async）async 默认是true*/xhr.open(‘get‘,‘09.XMLHttpRequest.php?username=xjj&password=123456‘, true); //数据可以拼接到字符串上
xhr.open(‘post‘,‘01.php‘);

2、请求头

/*请求头 注意 post必须设置请求头*/xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
get请求可以不设置

3、请求主体

/*发送请求 以&符拼接*/xhr.send(‘username=xjj&password=123456‘);
xhr.send("name=xjj&age=10");
get可以传空
/*设置请求的内容 get方式的时候 发送的内容 null是不传任何东西的意思*/xhr.send(null);

注意书写顺序

2.2、响应

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。

HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

xhr.onreadystatechange = function(){/*什么时候才算是http通讯结束 在readyState=4的是 响应完成*/    /*什么是才算是通讯成  status 200 */    //console.log(xhr.readyState);    //console.log(xhr.responseText);if(xhr.readyState == 4 && xhr.status == 200){
if(xhr.readyState == 4 && xhr.status == 200){
        console.log(‘ok‘);
        console.log(xhr.responseText);
        /*把内容渲染在页面当中*/document.querySelector(‘#result‘).innerHTML = xhr.responseText;
    }
**readyState**
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态

1、获取状态行（包括状态码&状态信息）

xhr.status 状态码 

xhr.statusText 状态码信息

2、获取响应头

xhr.getResponseHeader(‘Content-Type‘);
xhr.getAllResponseHeaders();

3、响应主体

xhr.responseText
xhr.responseXML

我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

2.3、API详解
xhr.open() 发起请求，可以是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
xhr.status表示响应码，如200
xhr.statusText表示响应信息，如OK
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader(‘key‘) 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体

注：GET和POST请求方式的差异（面试题）

1、GET没有请求主体，使用xhr.send(null)   一般是读取数据的时候用

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send(‘name=itcast&age=10‘)    传参数的时候使用

4、POST需要设置

5、GET效率更好（应用多）

6、GET大小限制约4K，POST则没有限制

3  XML

1、必须有一个根元素

<!--root 根节点是一定但添加的-->

2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号（浏览器自动修正成双引号了）
5、特殊符号要使用实体

6、注释和HTML一样

虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。

/*xhr.responseXML*/返回的是一个dom对象*/var xmlDom = xhr.responseXML//用它才能获取dom;//可以查询元素对象
var items = xmlDom.querySelectorAll(‘item‘);
<?php 
//php必须是Content-Type:application/xml  才能返domheader(‘Content-Type:application/xml;charset=utf-8‘);/*返回内容是  application/xml */    /*php程序来获取xml内容*/$xml = file_get_contents(‘01.xml‘);
<?xml version="1.0" encoding="UTF-8"?><root><arrayList><array><src>images/banner.jpg</src><newPirce>12.00</newPirce><oldPrice>30.00</oldPrice></array><array><src>images/banner.jpg</src><newPirce>12.00</newPirce><oldPrice>30.00</oldPrice></array></arrayList></root>
<?php
    header(‘Content-Type:text/xml;charset=utf-8‘);
    /*以xml格式传输数据的时候要求响应内容格式是   text/xml*//*file_get_contents 获取文件内容*/$xml = file_get_contents(‘01.xml‘);

    /*输出xml内容*/echo$xml;
?>
var xhr = new XMLHttpRequest;
xhr.open(‘get‘,‘01.php‘);
xhr.send(null);
xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){
        /*获取到XML格式内容  放回的是DOM对象  document*/var xml = xhr.responseXML;
        /*通过选着器可以获取到xml的数据*/console.log(xml.querySelectorAll(‘array‘)[0].querySelector(‘src‘).innerHTML);
    }
}

4、 JSON

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

1、数据在名称/值对中

2、数据由逗号分隔(最后一个健/值对不能带逗号)

3、花括号保存对象方括号保存数组

4、使用双引号

[
  {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
  {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
  {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
]

JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取

1、PHP解析方法

json_encode()、json_decode()

/*把php数组编码成json字符串  json_encode*/$json_str = json_encode($json_obj);
/*试用json_decode方法解析json字符串  解码成php数组 数组当中是php对象*/$json_obj = json_decode($json);
<?php
    header(‘Content-Type:text/html;charset=utf-8‘);
    /*以json格式传输数据的时候要求响应内容格式是   application/json*//*注意也可以不设置  但是这遵循的一个规范*//*file_get_contents 获取文件内容*/$json = file_get_contents(‘01.json‘);

    /*输出json内容*/echo$json;
    echo‘<br><br>‘;

    $array = array(
        array(‘src‘=>‘images/detail01.jpg‘,‘newPrice‘=>‘12.00‘,‘oldPrice‘=>‘455.00‘),
        array(‘src‘=>‘images/detail02.jpg‘,‘newPrice‘=>‘65.00‘,‘oldPrice‘=>‘878.00‘),
        array( ‘src‘=>‘images/detail01.jpg‘,‘newPrice‘=>‘100.00‘,‘oldPrice‘=>‘1000.00‘)
    );

    /*将php数组转化成json字符*/$json_array = json_encode($array);
    echo$json_array;
    echo‘<br><br>‘;

    /*将json字符转化成php数组*/$array_json = json_decode($json_array);
    echo$array_json;
    echo‘<br><br>‘;
?>

1、Javascript 解析方法

JSON对象 JSON.parse()、JSON.stringify()；
JSON兼容处理json2.js

总结：JSON体积小、解析方便且高效，在实际开发成为首选。

/*json字符串  怎么转化成js认识的对象   JSON  把这个对象叫做 json对象*/var json_obj = JSON.parse(json);
/*把json对象转成json字符串*/

var json_str = JSON.stringify(json_obj);
var xhr = new XMLHttpRequest;
    xhr.open(‘get‘,‘01.php‘);
    xhr.send(null);
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            /*获取仅仅是字符串*/var text = xhr.responseText;

            /*需要把字符串转化成JSON对象*/var json_obj = JSON.parse(text);
            console.log(json_obj);

            /*我们也可以把JSON对象转化成字符串*/var json_str = JSON.stringify(json_obj);
            console.log(json_str);
        }
    }

5、 兼容性

关于IE的兼容方面，了解即可。

functionXHR() {
        var xhr;
        try {
            xhr = new XMLHttpRequest();
        }
        /*如果 try内的程序运行错误  抛出异常  捕捉异常  上面程序当中运行的错误*/catch(e) {
            /*在不同的IE版本下初始  ActiveXObject  需要传入的标识*/var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

            for (var i=0;i<IEXHRVers.length;i++) {
                try {
                    xhr = new ActiveXObject(IEXHRVers[i]);
                }
                catch(e) {
                    /*如果出现错误的时候  停止当次的循环*/continue;
                }
            }
        }
        return xhr;
    }

8.6、 封装ajax工具函数

/**
 * ITCAST WEB
 * Created by zhousg on 2016/5/24.
 *//*
 * 1. 请求的类型                type    get post
 * 2. 请求地址                  url
 * 3. 是异步的还是同步的         async   false true
 * 4. 请求内容的格式            contentType
 * 5. 传输的数据                data    json对象
 *
 * 6.响应成功处理函数           success   function
 * 7.响应失败的处理函数         error     function
 *
 * 这些都是动态参数  参数对象  options
 * *//*封装一个函数*/window.$ = {};
/*申明一个ajax的方法*/
$.ajax = function(options){

    if(!options || typeof options != ‘object‘){
        returnfalse;
    }

    /*请求的类型*/var type = options.type || ‘get‘;/*默认get*//*请求地址 */var url = options.url || location.pathname;/*当前的地址*//*是异步的还是同步的 */var async = (options.async === false)?false:true;/*默认异步*//*请求内容的格式 */var contentType = options.contentType || "text/html";

    /*传输的数据 */var data = options.data || {};/*｛name:‘‘,age:‘‘｝*//*在提交的时候需要转成 name=xjj 这种格式*/var dataStr = ‘‘/*数据字符串*/for(var key in data){
        dataStr += key+‘=‘+data[key]+‘&‘;
    }

    dataStr = dataStr && dataStr.slice(0,-1);

    /*ajax 编程*/var xhr = new XMLHttpRequest();

    /*请求行*//*(type==‘get‘?url+‘?‘+dataStr:url)判断当前的请求类型*/
    xhr.open(type,(type==‘get‘?url+‘?‘+dataStr:url),async);

    /*请求头*/if(type == ‘post‘){
        xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
    }

    /*请求主体*//*需要判断请求类型*/
    xhr.send(type==‘get‘?null:dataStr);

    /*监听响应状态的改变  响应状态*/
    xhr.onreadystatechange = function(){
        /*请求响应完成并且成功*/if(xhr.readyState == 4 && xhr.status == 200){
            /*success*/var data = ‘‘;
            var contentType = xhr.getResponseHeader(‘Content-Type‘);
            /*如果我们服务器返回的是xml*/if(contentType.indexOf(‘xml‘) > -1){
                data = xhr.responseXML;
            }
            /*如果我们的服务器返回的是json字符串*/elseif(contentType.indexOf(‘json‘) > -1){
                /*转化json对象*/
                data = JSON.parse(xhr.responseText);
            }
            /*否则的话他就是字符串*/else{
                data = xhr.responseText;
            }

            /*回调 成功处理函数*/

            options.success && options.success(data);
        }
        /*计时请求xhr.status不成功  他也需要的响应完成才认作是一个错误的请求*/elseif(xhr.readyState == 4){
            /*error*/
            options.error && options.error(‘you request fail !‘);

        }

    }
}
$.post = function(options){
    options.type = ‘post‘;
    $.ajax(options);
}
$.get = function(options){
    options.type = ‘get‘;
    $.ajax(options);
}

7、 jquery的ajax

时间： 2024-10-19 22:03:39

ajax编程的相关文章

AJAX编程-封装ajax工具函数

即 Asynchronous [e's??kr?n?s] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器进行通信. XMLHttpRequest可以以异步方式的处理程序,浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面. 封装ajax工具函数 $.ajax = function(options){ if(!options) return fal

Ajax编程中，经常要能动态的改变界面元素的样式

在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000”;其中style 对象有很多属性,基本上CSS 里拥有的属性在JavaScript 中都能够使用.现在考虑,如果一个函数接收参数,用以指定一个界面元素的样式,那就需要设计参数的实现方式,显然一个或几个参数是不能符合要求的,下面是一种实现:function setStyle(_style){//得到

JavaWeb ajax编程(未完待续)

1.Ajax 1.1Ajax的定义 Ajax:(Asynchronous JavaScript And XML)指异步 JavaScript 及 XML. 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术,是基于JavaScript.XML.HTML.CSS新用法. Ajax:只刷新局部页面的技术 JavaScript:更新局部的网页 XML:一般用于请求数据和响应数据的封装 XMLHttpRequest对象:发送请求到服务器并获得返回结果 CSS:美化页面

AJAX编程实践

---------------------------------------------------------------------------------------------------------------[版权申明:本文系作者原创,转载请注明出处]文章出处:http://blog.csdn.net/sdksdk0/article/details/51727377作者:朱培   ID:sdksdk0-----------------------------------------

HTTP服务&amp;AJAX编程

即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用. 本质是在HTTP协议的基础上以异步的方式与服务器进行通信. 传统方式我们是以表单形式与服务器通信的. 1.1   异步 指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 其优势在于不阻塞程序的执行,从而提升整体执行效率. 现实生活中的一个例子 打电话时同步 发消息是异步 XMLHttpRequest可以以异步方式的处

Ajax编程相对路径与绝对路径

http://www.worlduc.com/blog2012.aspx?bid=16946309 ajax同一域名调用采用相对路径 var url = 'QuerySingleDataByField?funId=44&_criteria=[{' + '"fieldName":' + '"perform_id"' + ',"operator":' + '"="' + ',"value":' + pe

从零编程：ajax基本知识

ajax 在MVC中示例: 1 function autoSubmit() { 2 var postData = $("#AddForm").formSerialize(); 3 var url = "@Url.Action("Registration", "HospitalIntroduct")"; 4 var options = { 5 type: 'POST', 6 data: postData, 7 url: url,

ajax之请求对象的创建以及它与服务器之间的4次“握手”（好吧其实只有3次）

request对象的创建 对于request对象的创建,我们总会第一时间反映到下列语句 var request=new XMLHttpRequest(); 不过因为各大浏览器之间的相互斗殴行为,事情是不会这么简单的. 比如非常经典的:IE浏览器没有XMLHttpRequest函数. 但这难不倒我们聪明机智的程序员,我们也有经典的应对措施: function createRequest(){     try{         request=new XMLHttpRequest();     }c

ajax知识整理

HTTP服务 1.服务器 服务器类型 服务类型:文件服务器.数据库服务器.邮件服务器.Web服务器等: 操作系统:Linux服务器.Windows服务器等: 应用软件:Apache服务器.Nginx 服务器.IIS服务器.Tomcat服务器. weblogic服务器.WebSphere服务器.boss服务器. Node服务器等: 服务器软件 概念:使计算机具备提供某种服务能力的应用软件,称为服务器软件, 通过安装相应的服务软件,然后进行配置后就可以使计算具备了提供某种服务的能力 文件服务器:Se