用js实现web端跨域请求

具体例子请参看博客：http://blog.csdn.net/ls0609/article/details/73920229

最近一个项目需要实现客户端pc机器上录音并且上传给服务器端实现语音识别，用的chrome浏览器调试，eclipse平台J2EE开发环境。项目开始的时候，不知道需要跨越请求，用XMLHttpRequest 写上传代码后发现不起作用，后来查阅资料发现需要跨越请求，服务器配合修改允许跨域访问传送数据。

修改后的代码上传数据部分如下：

function uploadSpeexData(data)
  {//传入的是一窜Blob，里面是dataview数据
    var uploadData = data[0];                   
    var mTimestamp = new Date().getTime();
    var tempSign = mAppSecret + "api="+mApi+"appkey="+mAppKey+"timestamp="+mTimestamp+mAppSecret;
    var mSign = $.md5(tempSign);

    var serverUrl = mUrl+"?"+"appkey"+"="+mAppKey
                    +"&"+"api="+mApi
                    +"&"+"timestamp="+mTimestamp
                    +"&"+"sign="+mSign
                    +"&"+"seq="+mSeq
                    +"&"+"compress="+1;//+"&"+"compress="+0;
                //+"&"+"stop="+1;   


        if (window.FileReader)
        {
        var reader = new FileReader();
        reader.readAsArrayBuffer(data);//读出到arraybuffer中
        reader.onloadend = function() {
            var UInt8Data = new Uint8Array(this.result);
            var pcmData = UInt8Data.subarray(0);
            var dataArray  = new Int16Array(pcmData.buffer);
             var spxcode = new Speex({ quality: 10 , mode:  1, bits_size:  70});
             var spxdata = spxcode.encode(dataArray, true);//speex压缩

             var blobData = new Blob(spxdata);  //压缩后的数据生成Blob类型
             var readerTemp = new FileReader();
             readerTemp.readAsArrayBuffer(blobData);//读到arraybuffer中
             //下面是实现跨越请求上次到服务器
             readerTemp.onloadend = function() {
                    $.ajax({
                        url: serverUrl,//服务器地址
                        data:this.result,//读到arraybuffer中的待上传数据
                        type: 'POST', //设置post上传数据类型
                        dataType: 'text',//here
                        processData: false,//数据不进行预处理
                        headers: {'Content-Type': 'application/octet-stream'},
                        xhrFields: {//跨越请求，必须加上这个字段
                            withCredentials: true
                           },
                        success: function (data) {
                            //alert('请求成功');
                        interval = setInterval(getServerResult, 500, serverUrl);

                        },
                        error:function(msg){
                        //alert('请求发生错误');
                        }
                    });     
             }                                                                                              
        }
        }
  }


  function getServerResult(serverUrl) 
 {           
    var url_request = serverUrl+"&"+"stop="+1
    //向服务器请求返回结果
        $.ajax({
            url: url_request,
            type: 'GET',
            dataType: 'json',//here
            async: false,
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                //alert('请求成功: '+data);
                //alert('请求成功: ');
                result = data;
                intervalCount++;
                if ((result['data'] && result['data']['asr'] && 
                     result['data']['asr']['final']) || intervalCount > 20) {
                    clearInterval(interval);
                    //$('#result').text(JSON.stringify(result));
                    //alert(JSON.stringify(result));
                    callBack(JSON.stringify(result));                   
                  intervalCount = 0;
                  clearInterval(interval);
                } else {
                    //$('#log').append(JSON.stringify(result) + '<br>');
                }                   
            },
            error:function(msg){
               callBack(JSON.stringify(msg));       
               intervalCount = 0;
            //alert(''请求发生错误123: '+msg);
            clearInterval(interval);
            }
        });
    }   

在ajax请求中，
xhrFields: {
withCredentials: true
},
跨越请求，必须加上这个字段.

通过上述代码，最终在项目中实现了跨越请求，也拿到了服务器端语音识，和语义理解的json字符串。

具体例子请参看博客：http://blog.csdn.net/ls0609/article/details/73920229