[Javascript] カンタンAjaxコード

ソースコード

function Ajax(options){ this.options = options || {} const xhr = new XMLHttpRequest() xhr.open( this.options.method || 'post', this.options.url, this.options.async ?? true) xhr.setRequestHeader( 'Content-Type', this.options.content_type || 'application/x-www-form-urlencoded' ) xhr.onload = this.loaded.bind(this) xhr.send(this.get_queries(this.options.query)) } Ajax.prototype.get_queries = function(queries){ if(!queries){return null} return Object.entries(queries).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&'); } Ajax.prototype.loaded = function(e){ if(!this.options.success){return} this.options.success(e.target) }

使い方

new Ajax({ url : 'sample.json', method : 'get', success : (e => { const data = JSON.parse(e.response) console.log(data) }) })

404 not-found対応

function ajax(){ const xhr = new XMLHttpRequest() xhr.open('get' , this.file , true) xhr.setRequestHeader('Content-Type', 'text/html'); xhr.onreadystatechange = (e => { if(xhr.readyState !== XMLHttpRequest.DONE){return} const status = xhr.status; if (status === 0 || (status >= 200 && status < 400)) { loaded(e) } else { loaded(e) } }) xhr.send() } funtion loaded(e){ const res = e.target.response }

POSTクエリ対応

ajax(){ const query = { mode : 'search', } const xhr = new XMLHttpRequest() xhr.withCredentials = true; xhr.open('POST' , 'example.php' , true) xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = this.loaded.bind(this) const query_string = Object.entries(query).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&'); xhr.send(query_string) } loaded(e){ if(e.target.readyState !== XMLHttpRequest.DONE){return} if(e.target.status !== 200){return} if(!e.target.response){return} console.log(e.target.response) }

ポイント

post送信する場合は、setRequestHeader()が、"application/x-www-form-urlencoded"となっていないと正常にデータが送れない場合があるので要注意!