Node之跨域

ajax

let wd=event.target.value
let xhr=new XMLHttpRequest();
xhr.open('GET',`https://www.baidu.com`,false)  //請求方式，請求地址，是否異步
xhr.onreadystatechange=function(){
    if(xhr.readState==4&&/2\d{2}/.test(xhr.status)){

     }
}

jsonp

 let wd=event.target.value;
 let script=document.createElement('script')
 script.src=`http://www.baidu.com`
 document.body.appendChild(script)

jquery

let wd=event.target.value;
this.setState({wd},()=>{
    $.ajax({
        type:'GET',
        utl:`http://www.baidu.com`,
        dataType:'jsonp',
        jsonp:'cb',
        data:{wd},
        success:(result)=>{
            this.setState({words:result.s})
        }
    })
})

• demo(react中的應用。js文件)

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.css'
import $ from 'jquery'


class Search extends Component{
    constructor(){
        super();
        this.state={wd:'',words:[],index:-1};

        //jsonp
      /* window.jsonpCb= (result)=> {
            console.log(result)
            let words=result.s;
            this.setState({words:result.s})
        }*/

    }
    handleChange=(event)=>{
        //ajax
       /* let wd=event.target.value;
       // fetch(`https://www.baidu.com/su?wd=a&cb=cb`)//向後臺發請求
        let xhr=new XMLHttpRequest();
        xhr.open('GET',`https://www.baidu.com/su?wd=${wd}&cb=cb`,false)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&/2\d{2}/.test(xhr.status)){

            }
        }*/
       //jsonp
        /*let wd=event.target.value;
        let script=document.createElement('script');
        script.src=`https://www.baidu.com/su?wd=${wd}&cb=jsonpCb`;
        document.body.appendChild(script);
        this.setState({wd})*/
        //jquery
        let wd=event.target.value;
        this.setState({wd},()=>{
            $.ajax({
                type:'GET',
                url:`https://www.baidu.com/su`,
                dataType:'jsonp',//制定響應體的內容類型
                jsonp:'cb',//指定在後臺接收回調方法名的參數名
                data:{wd},
                success:(result)=>{
                    this.setState({words:result.s})
                }
            })
        })

        //成功的回調方法2
       /* }).then(success:(result)=>{
    this.setState({words:result.s,wd})
        })*/

    }
    handleKeyDown=(event)=>{
       let keyCode=event.keyCode
        if(keyCode==40||keyCode==38){//下
            let index=this.state.index
            if(keyCode==40){
                if(++index>=this.state.words.length){
                    index=-1
                }
            }else if(keyCode==38){
                if(--index==-2){
                    index=this.state.words.length-1
                }
            }
            this.setState({index})
        }

    }

    render(){
        return(
            <div className="container">
                <div className="row">
                    <div className="col-md-8 col-md-offset-2">
                        <div className="panel panel-default">
                            <div className="panel-heading">
                                <input
                                    onKeyDown={this.handleKeyDown}
                                    type="text"
                                    value={this.state.index==-1?this.state.wd:this.state.words[this.state.index]}
                                    onChange={this.handleChange}
                                    className="form-control"/>
                            </div>
                            <div className="panel-body">
                                <ul className="list-group">
                                    {this.state.words.map((item, index) => (
                                        <li className={"list-group-item "+(index==this.state.index?'active':'')} key={index}>
                                            {item}
                                            </li>
                                            ))}
                                </ul>
                            </div>
                            <div className="panel-footer">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
ReactDOM.render(<Search />,document.querySelector('#root'));